vue动态添加class
vue动态添加class
·
第一种:对象的形式: 用花括号包裹起来,类名用引号,可添加多个class
<p :class="{'p1' : false, 'p': true}">
第二种:三元表达式 注意点:放在数组中,类名要用引号
<p :class="[ 1 < 2 ? 'p1' : 'p' ]" ></p>
第三种:数组的形式
<p :class="[isTrue, isFalse]"></p>
第四种:数组中使用对象
<p :class="[{'p1': false}, isFalse]"></p>
第五种:通过函数返回对应的class名字
<p :class="setClass"></p>
第六种:在原有的class基础上再加class
<div :class="['active','on',seckillProfit>=0?'green':'red ']">{{seckillProfit}}</div>
原本就有 sctive、on,两个class,再根据 seckillProfit 值动态加green / red
以上对象 / 方法皆参考如下定义
<script>
export default {
data () {
return {
isTrue: 'p1',
isFalse: 'p'
};
},
method: {
setclass () {
return 'p1';
}
}
}
</script>
更多推荐
已为社区贡献11条内容
所有评论(0)