vue动态绑定class的几种方式

1. 单对象形式 (active加不加单引号都可以)

:class="{ 'active': isActive }"

data() {
　　return {
　　　　isActive: true
　　}
}

2. 单字符串形式（根据一个变量的值，但是这种方式有种劣势，只能绑定一个类名）

　数组对象形式（可以绑定多个类名）

 :class="setClassPerson === index ? 'active' : ''"
等价于
 :class="{ 'active': setClassPerson == index }"
等价于
 :class="[setClassPerson === index ? 'active' : '']"

3. 数组对象绑定并判断多个

:class="{ 'active': isActive, 'sort': isSort }"
等价于
:class="[ isActive ? 'active' : '', isSort ? 'sort' : '']"


data() {
  return {
    isActive: true,
    isSort: false
  }
}

4. 数组对象动静态结合

//前面这个active在对象里面可以不加单引号，后面这个itemlist要加单引号，因为itemlist相当于写死的类名
:class="[{ active: isActive }, 'itemlist']"
等价于
:class="['itemlist', isActive === index ? 'active' : '']"