VUE大神的成长之路--Class 与 Style 绑定

绑定HTML class
一：对象语法

data: {
isActive: true,
hasError
}

也可以直接绑定数据里的一个对象

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

介绍一个强大的模式：我们可以在这里绑定返回的计算属性

data: {
isActive: true,
error: null
},
computed: {
classObject: function() {
return {
active: this.isActive && !this.error,
'text-danger': this.error && this.error.type === 'fatal',
}
}
}

二：数组语法

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

如果想根据条件切换列表中的class，可以用三元表达式：

当有多个条件class时