第一种:(最简单的绑定)
1.绑定单个class
html部分:
js部分:判断是否绑定一个active
data() {
return {
isActive: true
};
}
结果渲染为:
2.若要绑定多个class,需要逗号隔开就行:(这里的activeTwo加不加引号都可以,也一样都能渲染,如下)
js部分:判断是否绑定对应class
data() {
return {
isActive: true,
hasError: true
};
}
结果渲染为:
第二种:(绑定的数据对象)
data: {
classObject: {
active: true,
}
}
第三种:(绑定一个返回对象的计算属性)
![8525df89a9234f808fcab252360ef60c.jpg](https://img.136.la/20210610/8525df89a9234f808fcab252360ef60c.jpg)
export default {
data() {
return {
isActive: true,
};
},
computed: {
classObject: function () {
return {
active: this.isActive,
}
}
}
![8525df89a9234f808fcab252360ef60c.jpg](https://img.136.la/20210610/8525df89a9234f808fcab252360ef60c.jpg)
结果渲染为:
第四种:(单纯数组方法)
data() {
return {
activeClass: "active",
errorClass: "disActive"
};
},
结果渲染为:
第五种:(数组与三元运算符结合判断选择需要的class)
data() {
return {
isActive: false,
};
},
结果渲染为: