vue中设置class的多种方式
class可以绑定对象数组和函数class还可以和静态的class共存<li class="cla1" :class="setClass(item.status)" v-for="(item, index) in dataLists1" :key="index" ></li>// 将class赋值给方法,动态生成对象setClass (item) {...
·
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'
}
更多推荐
已为社区贡献12条内容
所有评论(0)