编写时间:2019-08-22
更新时间:2019-08-22作者:鬼小妞
备注: 本文
整理
了vue动态添加class的几种方式状态:
已完成、待整合
2019-08-22
p1,p为类名
【对象】
对象的形式: 用花括号包裹起来,类名用引号,
第一个参数 类名, 第二个参数:boolean值
优点: 以对象的形式可以写多个,用逗号分开
html :class="{'p1' : true}"
html :class="{'p1' : false, 'p': true}"
【数组】
html :class="['p1', 'p2']"
html :class="[{'p1':true}]"
html :class="[{'p1': false}, 'p2']"
三元表达式
注意点:放在数组中,类名要用引号
html :class="[ 1 < 2 ? 'p1' : 'p' ]"
【返回方法】class中还可以传方法,在方法中返回类名
html :class="setClass"
method: {
setclass () {
return 'p1';
}
}