文档章节

Vue.js绑定HTML class数组语法错误(官网错误,同学可以上github上改一下)

甄佰匠人
 甄佰匠人
发布于 2016/10/19 10:46
字数 198
阅读 552
收藏 3

Vue.js绑定HTML class数组语法错误(官网错误,同学可以上github上改一下)

昨天在官网教程上发现一个错误是这样的,下面看图

http://cn.vuejs.org/guide/class-and-style.html

当有多个条件class时这样写有些繁琐。在1.0.19+中,可以在数组语法中使用对象语法:

如果这样写是可以执行成功的,但有错误

data: {

    classA: 'class-a',

    classB: 'class-b',

    classC: 'class-c',

    isB: true,

    isC: false

}

<div :class="[classA, { classB: isB, classC: isC }]">

渲染为:

<div class="class-a classB">

如果是短横符这样的 class-b 是不成功的,所以这里还是要用标准的对象语法加上引号

<div :class="[classA, { 'class-b': isB, 'class-c': isC }]">

渲染为:

<div class="class-a class-b">

© 著作权归作者所有

甄佰匠人
粉丝 3
博文 154
码字总数 86632
作品 0
浦东
程序员
私信 提问
加载中

评论(6)

wuyiw
wuyiw

引用来自“wuyiw”的评论

https://jsfiddle.net/cxunusaq/7/
<div :class="[classA, { 'classB': isB, 'classC': isC }]">
渲染为:
<div class="class-a classB"></div>

引用来自“hello宝似”的评论

谢谢,已经纠正,我的意思是一定加上引号,避免对于短横符写法的class名渲染错误

引用来自“wuyiw”的评论

vue文档那里有点没说清, 如果用object的话, key是和data里面的数据无关的, 渲染的类名就是key本身, 把data里的classB去掉不会影响结果. 所以这倒不算vue的错误, 而是js的标准里如果key有横线空格等等字符的话就要加引号~

引用来自“hello宝似”的评论

既然官网上说到是可以在数组语法中使用对象语法,我觉得还是要以对象语法的标准来写,这样更加严谨,版本在升级,谈到1.0.19以前的版本是不支持的,说明官方也是在不断改进的,所有的标准都是随时间进化升级的
https://mathiasbynens.be/notes/javascript-properties
你可以看这篇文章, js标准里属性名字分为字面量和计算值, 字面量有IdentifierName/StringLiteral/NumericLiteral三种, 加引号的只是属于其中的StringLiteral, 并不是说不加引号就不标准不严谨.
而且这事真的和vue没关系啦, 它就是用js标准而已~
甄佰匠人
甄佰匠人 博主

引用来自“wuyiw”的评论

https://jsfiddle.net/cxunusaq/7/
<div :class="[classA, { 'classB': isB, 'classC': isC }]">
渲染为:
<div class="class-a classB"></div>

引用来自“hello宝似”的评论

谢谢,已经纠正,我的意思是一定加上引号,避免对于短横符写法的class名渲染错误

引用来自“wuyiw”的评论

vue文档那里有点没说清, 如果用object的话, key是和data里面的数据无关的, 渲染的类名就是key本身, 把data里的classB去掉不会影响结果. 所以这倒不算vue的错误, 而是js的标准里如果key有横线空格等等字符的话就要加引号~
既然官网上说到是可以在数组语法中使用对象语法,我觉得还是要以对象语法的标准来写,这样更加严谨,版本在升级,谈到1.0.19以前的版本是不支持的,说明官方也是在不断改进的,所有的标准都是随时间进化升级的
wuyiw
wuyiw

引用来自“wuyiw”的评论

https://jsfiddle.net/cxunusaq/7/
<div :class="[classA, { 'classB': isB, 'classC': isC }]">
渲染为:
<div class="class-a classB"></div>

引用来自“hello宝似”的评论

谢谢,已经纠正,我的意思是一定加上引号,避免对于短横符写法的class名渲染错误
vue文档那里有点没说清, 如果用object的话, key是和data里面的数据无关的, 渲染的类名就是key本身, 把data里的classB去掉不会影响结果. 所以这倒不算vue的错误, 而是js的标准里如果key有横线空格等等字符的话就要加引号~
甄佰匠人
甄佰匠人 博主

引用来自“wuyiw”的评论

https://jsfiddle.net/cxunusaq/7/
<div :class="[classA, { 'classB': isB, 'classC': isC }]">
渲染为:
<div class="class-a classB"></div>
谢谢,已经纠正,我的意思是一定加上引号,避免对于短横符写法的class名渲染错误
甄佰匠人
甄佰匠人 博主
谢谢,已经纠正,我的意思是一定加上引号,避免对于短横符写法的class名渲染错误
wuyiw
wuyiw
https://jsfiddle.net/cxunusaq/7/
<div :class="[classA, { 'classB': isB, 'classC': isC }]">
渲染为:
<div class="class-a classB"></div>
Vue 入门之项目目录结构介绍

Vue 是一套用于构建用户界面的渐进式框架,与其它大型的页面框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另...

code_xzh
2018/05/20
0
0
Vue.js入门之工程目录介绍

Vue 是一套用于构建用户界面的渐进式框架,与其它大型的页面框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另...

异步社区
2018/05/22
0
0
v-model 使用场景和源码学习

前言 在使用v-model时习惯的想到数据双向绑定,但是关于v-model的使用场景和原理并不熟悉。接下来说说v-model的使用场景,和vue的源码。 v-model的使用限制 HTML 原生的输入元素 原理: 通过使...

三只萌新
2018/11/07
0
0
.NET Core实战项目之CMS 第六章 入门篇-Vue的快速入门及其使用

写在前面 上面文章我给大家介绍了Dapper这个ORM框架的简单使用,大伙会用了嘛!本来今天这篇文章是要讲Vue的快速入门的,原因是想在后面的文章中使用Vue进行这个CMS系统的后台管理界面的实现...

依乐祝
2018/11/28
0
0
小白教程|一小时上手最流行的前端框架vue

前言 vue是现在很火的一个前端MVVM框架,它以数据驱动和组件化的思想构建,与angular和react并称前端三大框架。相比angular和react,vue更加轻巧、高性能、也很容易上手。大家也可以移步vue...

全栈社区
04/08
0
0

没有更多内容

加载失败,请刷新页面

加载更多

只需一步,在Spring Boot中统一Restful API返回值格式与统一处理异常

统一返回值 在前后端分离大行其道的今天,有一个统一的返回值格式不仅能使我们的接口看起来更漂亮,而且还可以使前端可以统一处理很多东西,避免很多问题的产生。 比较通用的返回值格式如下:...

晓月寒丶
昨天
59
0
区块链应用到供应链上的好处和实际案例

区块链可以解决供应链中的很多问题,例如记录以及追踪产品。那么使用区块链应用到各产品供应链上到底有什么好处?猎头悬赏平台解优人才网小编给大家做个简单的分享: 使用区块链的最突出的优...

猎头悬赏平台
昨天
28
0
全世界到底有多少软件开发人员?

埃文斯数据公司(Evans Data Corporation) 2019 最新的统计数据(原文)显示,2018 年全球共有 2300 万软件开发人员,预计到 2019 年底这个数字将达到 2640万,到 2023 年达到 2770万。 而来自...

红薯
昨天
65
0
Go 语言基础—— 通道(channel)

通过通信来共享内存(Java是通过共享内存来通信的) 定义 func service() string {time.Sleep(time.Millisecond * 50)return "Done"}func AsyncService() chan string {retCh := mak......

刘一草
昨天
58
0
Apache Flink 零基础入门(一):基础概念解析

Apache Flink 的定义、架构及原理 Apache Flink 是一个分布式大数据处理引擎,可对有限数据流和无限数据流进行有状态或无状态的计算,能够部署在各种集群环境,对各种规模大小的数据进行快速...

Vincent-Duan
昨天
60
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部