html绑定类的两种方式,vue动态绑定class的最常用几种方式：

第一种：(最简单的绑定)

1.绑定单个class

html部分：

js部分：判断是否绑定一个active

data() {

return {

isActive: true

};

}

结果渲染为：

2.若要绑定多个class，需要逗号隔开就行：(这里的activeTwo加不加引号都可以，也一样都能渲染，如下)

js部分：判断是否绑定对应class

data() {

return {

isActive: true,

hasError: true

};

}

结果渲染为：

第二种：(绑定的数据对象)

data: {

classObject: {

active: true,

}

}

第三种：(绑定一个返回对象的计算属性)

export default {

data() {

return {

isActive: true,

};

},

computed: {

classObject: function () {

return {

active: this.isActive,

}

}

}

结果渲染为：

第四种：(单纯数组方法)

data() {

return {

activeClass: "active",

errorClass: "disActive"

};

},

结果渲染为：

第五种：(数组与三元运算符结合判断选择需要的class)

data() {

return {

isActive: false,

};

},

结果渲染为：