在Vue.js中用v-bind绑定类的注意事项

序

在Vue.js版本：1.0.27中，使用Vue.js中的V-bind指令绑定类和样式时，Vue.js对其进行了增强。除了字符串之外，表达式的结果还可以是对象或数组。

我自己在这里测试了一下，发现了以下问题：

如果使用对象语法绑定类，类名必须用引号表示相应样式，否则将被视为对象的属性，从而导致初始化报错。

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' title document/title script src=' http :http://cdn . bootscs.com/vue/1 . 0 . 27/vue . js '/script style。静态{ font-size : 120 px；宽度： 600 px；margin: 0 auto背景-颜色：黄色；高度： 120 px；线高： 120 px；文本对齐：中心；} .a级{ color: # FF0000} .b类{ text-decoration:下划线；}/style/head body div id=' app ' div v-bind : class object '关于类绑定/div/div script var VM=new vue({ El : ' # app '，data : { class object 3360 }//' class-a '，不能写成类。这里的ClassObject是js对象，class-b代表一种样式，所以必须写成‘class-a’并用引号括起来。//否则这里的class-a只能代表classObject的一个属性名，所以vuejs初始化时会报错。class-a':false，' class-b ' : true } })；/script/body/htmlreferences:

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

补充：

这里我感觉代码中的classObject有点像散，key是样式类，value是布尔值。

从控制台获取并更改classObject对象中的class-a值，如下图所示：

看到控制台里的操作，感觉classObject确实有一个像散列表类型。要验证这一点，你可以看看源代码(ps:我自己没看)。

在Vue.js1.0.19中，作者为它添加了一些语法，对象语法也可以用在数组中：

div v-bind :[' a类，{ ' b ' 3360 isb，' c' : isc}]'类绑定/div

Div v-bind: class=' [class a，{classb:ISB，class c:ISC}]'类绑定/div

上面，classA可以被引用，也可以不被引用。这是你自己的测试代码。

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' title document/title script src=' http :http://cdn . bootscs.com/vue/1 . 0 . 27/vue . js '/script style。静态{ font-size : 120 px；宽度： 600 px；margin: 0 auto背景-颜色：黄色；高度： 120 px；线高： 120 px；文本对齐：中心；} .a级{ color: # FF0000} .下划线；} .classC { text-shadow : 2px 2px 4px # 000000；} /style /head body div id='app '！-两种绑定：带引号的和不带引号的，都可以是-div v-bind: class=' [class a，{'classb' 3360 isb，' class c ' : isc }]' class binding/div v-bind : class='[class a，{classb: isb，class c : isc }]' class binding/div/div script var VM=new vue({ El : ' # app '，data 3333336)

以上就是本文的全部内容。希望这篇文章的内容对你的学习或工作有所帮助。有问题可以留言交流。