第一种
1.绑定单个class
<div :class="{'active':isActive}"></div>
js部分:判断是否绑定一个active
data() {
return {
isActive: true
};
}
2.绑定多个class,需要逗号隔开就行
<div class="activeOne" v-bind:class="{ activeTwo: isActive, 'activeThree': hasError }"></div>
js部分:判断是否绑定对应class
data() {
return {
isActive: true,
hasError: true
};
}
第二种(绑定的数据对象)
<div :class="classObject"></div>
data: {
classObject: {
active: true,
}
}
第三种(绑定一个返回对象的计算属性) []
<div :class="classObject"></div>
export default {
data() {
return {
isActive: true,
};
},
computed: {
classObject: function () {
return {
active: this.isActive,
}
}
}
第四种(单纯数组方法)
<div :class="[activeClass, errorClass]"></div>
data() {
return {
activeClass: "active",
errorClass: "disActive"
};
},
第五种(数组与三元运算符结合判断选择需要的class)
<div :class="[isActive?'active':'disActive']"></div>
data() {
return {
isActive: false,
};
},
网友评论