参考文章:
vue动态绑定class和style,三目运算符条件判定
vue项目中使用三元运算符来更改class(附源码)
项目实战如下
template 中定义
<div :class="[ifAuth.includes('1') ? 'box_wrap2 box_wrap2_1 hy_cel active' : 'box_wrap2 box_wrap2_1 hy_cel']"
@click="checktt('1')">
script 中data() 定义
return {
ifAuth: [],
};
methods 定义
checktt(i){
// 在该项目需求中是,点击一个div,可以亮起来
// 再次点击同一个div则变灰
if ( this.ifAuth.indexOf(i)!=-1){
this.ifAuth.splice(this.ifAuth.indexOf(i),1)
}else {
this.ifAuth.push(i)
}
},
style 定义
.box_wrap2 box_wrap2_1 hy_cel active {
background: url("~@/assets/images/c.png") no-repeat;
}
.box_wrap2 box_wrap2_1 hy_cel{
background: none;
}