Vue 动态绑定class

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;
}

OK，就这样，End~