加载中…Vue——class与style绑定——动态绑定class
(2018-02-13 18:03:32) | 分类： VUE |
操作元素的class列表和内联样式是数据绑定的一个常见需求。因为它们都是属性，我们可以用v-bind处理它们，只需要通过表达式计算出字符串结果即可。不过字符串拼接麻烦且易出错，在将v-bind用于class和style时，vue做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。
1、对象语法语法绑定class
http://s8/mw690/003xds7Kzy7le9a5FZRf7&690
在对象绑定class中，red值为true，blue值为false，如果值为true绑定成功false绑定失败，所以上例中给h2绑定了red（代表class=red）样式。
在对象绑定class中，red值为true，blue值为false，如果值为true绑定成功false绑定失败，所以上例中给h2绑定了red（代表class=red）样式。
值为true或者false也可以读vue实例中的数据。
注意：v-bind:class指令可以与普通的class属性共存，最后渲染结果是两个class的合集
注意：绑定的数据对象不必内联定义在模板里。
2、计算属性绑定class
我们也可以在这里绑定一个返回对象的计算属性。这是一个常用且强大的模式。
当有多个条件class时，上面的写法有点繁琐，所以在数组语法中也可以使用对象语法。
当在一个自定义组件上使用class属性，或者带数据绑定class属性时，这些类将被添加到该组件的根元素上面。这个元素上已经存在的类不会被覆盖。
上面的px也可以放到data数据里。
注意：绑定的数据对象不必内联定义在模板里。可以直接绑定一个样式对象更好，这会让模板更清晰。
注意：绑定的数据对象不必内联定义在模板里。可以直接绑定一个样式对象更好，这会让模板更清晰。
喜欢
0
赠金笔