vue动态绑定class的几种方式

对象方法：

1、简单绑定：(这里的active加不加单引号，都可以解析，不过最好还是加上，避免不必要的错误)

绑定并判断一个:class="{test: isTest}" 或者

:class="{'test': isTest}"

:class="{'test': isTest== 1}"

2、绑定并判断多个:class="{'test': isTest, 'second': isSecond}"

:class="{'test': isTest, 'second': isSecond, 'third': isThird}" 或者

:class="classObject"

data() { return { classObject: { test: true, second: false } }} 又或者

:class="{'test': isTest== 1}"

computed:{ classObject: () => { return {test: true, second: false }}

数组方法：

1、数组与三元运算符结合:class="[isTest ? 'active' : ''] 或者

:class="[isTest ? 'active' : 'active1'] 或者

:class="[isTest == 1 ? 'active' : 'active1']

2、数组与对象结合:class="[isTest ? 'active' : '', {'one': isOne} ] 或者

:class="[isTest ? 'active' : '', {'one': isOne}, {'second': isSecond} ]

3、数组、对象和静态class三种结合(数组里面用逗号分隔，多个静态的class用空格隔开):class="[isTest ? 'active' : '', {'one': isOne}, 'second'] 或者

:class="[isTest ? 'active' : '', {'one': isOne}, 'second third' ]