美文网首页
Vue 动态绑定class

Vue 动态绑定class

作者: 小睿同学 | 来源:发表于2020-08-11 10:20 被阅读0次
    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~

    相关文章

      网友评论

          本文标题:Vue 动态绑定class

          本文链接:https://www.haomeiwen.com/subject/pededktx.html