Vue.js class实例

Vue.js class实例
当 isActive 或者 hasError 变化时,class 属性值也将相应地更新。例如,如果 active 的值为 true,class 列表将变为 "static active text-danger"。
 
我们也可以直接绑定数据里的一个对象:
 
实例
text-danger 类背景颜色覆盖了 active 类的背景色:
 
<div id="app">
    <div class="static" :class="classObject"></div>
</div>
 
 
此外,我们也可以在这里绑定一个返回对象的计算属性。这是一个常用且强大的模式:
 
实例
data() {
  return {
    isActive: true,
    error: null
  }
},
computed: {
  classObject() {
    return {
      active: this.isActive && !this.error,
      'text-danger': this.error && this.error.type === 'fatal'
    }
  }
}

推荐阅读