美文网首页
:class类名绑定

:class类名绑定

作者: Amy_yqh | 来源:发表于2018-04-27 14:07 被阅读0次
    做项目的时候,给元素添加类名,很多情况下都是要动态分配,常用方式有:
    
    
    import Vue from 'vue'
    var app = new Vue({
        el:'#root',
        template:`
            <div v-bind::class="{'active':!isActive}">
                <p v-bind:class="classObj"></p>
                <div v-bind:class="classObject"></div>
                <div v-bind:class="[aaName,bbName]"></div>
                <div v-bind:class="[isActive ? 'active':'notactive','ok']"></div>
                <div v-bind:class="[{active:isActive},'OK']"></div>
            </div>
        `,
        data:{
            isActive:true,
            classObj:{
                'myFirstName':true
            },
            classObject: {
                active: true,
                'text-danger': false
            },
            aaName:'aaName',
            bbName:'bbName'
        }
    })
    1、普通模式:
        v-bind::class="{'active':!isActive}"
    2、对象模式
        <p v-bind:class="classObj"></p>
        data:{
            classObj:{
            'myFirstName':true
        },
        }
    3、数组形式
          <div v-bind:class="[aaName,bbName]"></div>
          data:{
            aaName:'aaName',
        bbName:'bbName'  
        }
    4、三元表达式形式
          <div v-bind:class="[isActive ? 'active':'notactive','ok']"></div>
    5、对象数组形式
        <div v-bind:class="[{active:isActive},'OK']"></div>
    我们常用的一般就是普通模式和数组模式
    

    相关文章

      网友评论

          本文标题::class类名绑定

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