绑定 Class

对象语法

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

注：属性名为class名，属性值必须为布尔类型

绑定的对象可以定义在data或computed里面，然后在html中使用：

data: {
  classObject: {
    active: true,
    'text-danger': false
  }
}

<div v-bind:class="classObject"></div>

数组语法

绑定多个属性，实际就是把属性值输出到html中

data: {
  activeClass: 'active',
  errorClass: 'text-danger'
}

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

渲染为

<div class="active text-danger"></div>

注：这种方法常用于多个class切换的情况