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'
}
Logo

前往低代码交流专区

更多推荐