当 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'

    }

  }

}