vue中设置class多种方式

class可以绑定对象数组和函数等

<!-- 第一种：数组 直接传递一个数组，注意：这里的class需要使用 v-moddel 做数据绑定 -->
33   <h1 :class="['red', 'thin']">第一种：数组 了解</h1>
34   <!-- 第二种：数组中使用三元表达式 -->
35   <h1 :class="['red', flag? 'active':'']">第二种：数组中使用三元表达式</h1>
36   <!-- 第三种：数组中嵌套对象 在数组中 使用对象替代三元表达式，提高代码可读性-->
37   <h1 :class="['red', 'italic', {'active' : flag}]">第三种：数组中嵌套对象</h1>
38   <!-- 第四种：直接使用对象 在为class 使用 V-bind 绑定对象的时候，对象的属性是类名，
39   由于对象属性可带引号也可不带引号，所以这里没有写引号；属性的值 是一个标识符 -->
4 <h1 :class="{red:true, thin:true, italic:true, active:false}">第四种：直接使用对象</h1>
41   <h1 :class="classObj">第四种：直接使用对象</h1>

class还可以和静态的class共存

 <li 
     class="cla1" 
     :class="setClass(item.status)" 
     v-for="(item, index) in dataLists1" 
     :key="index" >
 </li>

// 将class赋值给方法，动态生成对象
    setClass (item) {
      let obj = {};
      obj[type[item]] = true;
      return obj;
    },

 
export const type = {
  1: 'red',
  2: 'yellow',
  3: 'green',
  4: 'blue',
  5: 'purple',
  all: 'pink'
}