五、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数组语法
- 数组语法
- 自动添加前缀
- 多重值