扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
Class与Style绑定
对于数据绑定，一个常见的需求是操作元素的 class 列表和它的内联样式。因为它们都是属性，我们可以用 v-bind 来处理它们：只需要计算出表达式最终的字符串。
不过，字符串拼接麻烦又易错，因此，在 v-bind 用于 class 和 style 时，Vue.js 专门增强了它。表达式的结果类型除了字符串以外，还可以是对象或数组。
绑定HTML Class
1、对象语法
我们可以传给 v-bind:class 一个对象，以动态地切换 class
上面的语法表示 class active 的更新将取决于数据属性 isActive 是否为真值
我们也可以在对象中传入更多属性，用来动态切换多个class。此外，v-bind:class 还可以与普通的 class 属性共存
以上代码渲染为：
当isRipe 和 isNotRipe变化时，class列表将相应地更新。例如，如果 isNotRipe变为true，那么 class 列表将渲染成“static orange pear”。（一般情况下，v-bind:class 绑定的对象中只有一个class会生效，这取决于用户自己的设置）
注意：尽管可以用{{}}标签绑定 class，比如 class = "`className`"，但是不推荐这种写法和 v-bind:class 混用
我们也可以直接绑定数据中的一个对象，代码如下：
还可以在这里绑定一个返回对象的计算属性，这是一种常用且强大的模式，看一段示例代码：
渲染为：
2、数组语法
我们可以把一个数组传给 v-bind:class ，以应用一个 class 列表：