vue绑定class方法

1

第一种(绑定单个class）1.html部分代码

2.js部分代码：判断是否绑定一个classnamedata() {       return {            isActive: true       }}3.结果渲染为

2

第二种(绑定多个class）1.html部分代码

2.js部分代码：判断是否绑定对应classdata() {         return {              state: true,              isstate: true         };  }3.结果渲染为

3

第三种(绑定的数据对象）1.html部分代码

2.js部分代码data: {  classone : {    active: true,  } }3.结果渲染为

4

第四种（绑定一个返回对象的计算属性）1.html部分代码

2.js部分代码computed: {  classone () {    return {      active: true,    }  }3.结果渲染为

5

第五种（单纯数组方法）1.html部分代码

2.js部分代码data() {    return {      classone : 'classthree',      classtwo : 'classfour '    };  },3.结果渲染为

6

第六种（数组与三元运算符结合判断选择需要的class）1.html部分代码

2.js部分代码data() {    return {      state: false,    };  },3.结果渲染为