v-bind:class="{ 'classname1' : 条件1,'classname2':条件2 }"
//v-bind:class可以简写为:class
结果:当满足 条件1 时,会执行classname1;当满足 条件2 时,会执行classname2
例:
<div :class="{'background1':isSelect==='1','background2':isSelect==='2','background3':isSelect==='3'}">
</div>
在data里定义isSelect的值
data(){
return{
isSelect:'1',//值为1,执行background1;值为2,执行background2;值为3,执行background3;
}
}
配置各自的class
div{
width:200px;
height:200px;
}
.background1{
background:#E5624B;
}
.background2{
background:#589DFF;
}
.background3{
background:#50C18D;
}
网友评论