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