Vue基础之Class和Style绑定

既然v-bind可以动态绑定标签的属性，那么也可以用v-bind来处理class和style，只需要计算出表达式最终的字符串。不过，字符串拼接麻烦又易错。因此，在 v-bind 用于 class 和 style 时， Vue.js 专门增强了它。表达式的结果类型除了字符串之外，还可以是对象或数组

绑定 HTML Class：

对象语法：

我们可以传给 v-bind:class 一个对象，以动态地切换 class ，对象的属性名就是要给标签添加的类名，而决定类是否要显示的则是键值的真假，这里键值既可以是表达式也可以是data中的数据



上面的语法表示 classactive 的更新将取决于数据属性 isActive 是否为真值



这里如果动态计算函数currentInde的返回结果等于index的值，就会显示出类current

我们也可以在对象中传入更多属性用来动态切换多个 class 。此外， v-bind:class 指令可以与普通的 class 属性共存



如下 data:



渲染为:



你也可以直接绑定数据里的一个对象：

数组语法：

我们可以把一个数组传给 v-bind:class ，以应用一个 class 列表，数组的值并不是要添加到标签中的，而是其在data中对应的值才是真正要添加到DOM中的



渲染为:



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



此例始终添加 errorClass ，但是只有在 isActive 是 true 时添加 activeClass

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

用在组件上：

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

声明组件的一种方式是通过”Vue.component()”

例如，如果你声明了这个组件:



然后在使用它的时候添加一些类



HTML 最终将被渲染成为



同样的适用于绑定 HTML class



当 isActive 为 true 的时候，HTML 将被渲染成为

绑定内联样式：

对象语法：

v-bind:style 的对象语法十分直观——看着非常像 CSS ，其实它是一个 JavaScript 对象。 CSS 属性名可以用驼峰式（camelCase）或短横分隔命名（kebab-case）



直接绑定到一个样式对象通常更好，让模板更清晰

数组语法：

v-bind:style 的数组语法可以将多个样式对象应用到一个元素上