Vue2中Class与Style绑定

项目中遇到给v-bind:class传递一个数组，就来巩固一下Vue2中Class与Style的绑定

• 对象语法
• 数组语法

1.对象语法
可以传给v-bind:class 一个对象，以动态地切换 class：

<div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }"></div>

data: {
  isActive: true,
  hasError: false
}

结果渲染为：

<div class="static active"></div>

注：绑定的数据对象不必内联定义在模板里，或者还可以在这里绑定一个返回对象的计算属性。

2.数组语法
我们可以把一个数组传给v-bind:class，以应用一个 class 列表：

<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>

这样写将始终添加 errorClass，但是只有在 isActive为true时才添加 activeClass。

注：另外，在数组语法中也可以使用对象语法，如下：

<div v-bind:class="[{ active: isActive }, errorClass]"></div>