vue动态绑定class的几种方式

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' ]