vue教程自学笔记（三）

五、Class与Style绑定

可以用v-bind用于class和style，表达式结果类型除了字符串，还可以是对象或数组。

1.绑定HTML Class

• 对象语法：给v-bind:class传递一个对象，以便动态切换class：

<div v-bind:class="{ active: isActive }"></div>

　　表示active这个class存在与否取决于数字属性isActive的truthiness。

　　可以在对象中传入多个多个属性来动态切换多个class，也可以与普通的class共存。

　　绑定的数据对象不必内敛定义在模板里。

　　也可以绑定一个返回对象的计算属性。

• 数组语法：把一个数组传递给v-bind:class，以应用一个class列表。

　　如果也想根据条件切换列表里的class，可以用三元表达式。

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

• 用在组件上

　　当在一个自定义组件上使用class属性时，这些类将被添加到该组件的根元素上面。这个元素上已经存在的类不会被覆盖。

2.绑定内联样式

• 对象语法：v-bind:style数组语法
• 数组语法
• 自动添加前缀
• 多重值