一、對象語法
1、給v-bind:class 設(shè)置一個對象，可以動態(tài)地切換class，例如：

<div id="app">
    <div :class="{'active':isActive}"></div>
</div>
<script>
var app = new Vue({
    el:'#app',
    data:{
        isActive:true
    }
})
</script>

最終渲染結(jié)果： <div class="active"></div>
2、對象中也可存在多個屬性，動態(tài)切換class，：class 可以合class共存

<div id="app">
    <div class="static" :class="{'active':isActive,'error':isError}"></div>
</div>
<script>
var app = new Vue({
    el:'#app',
    data:{
        isActive:true,
        isError:false
    }
})
</script>

最終渲染結(jié)果：<div class="static active"></div>
3、當(dāng):class的表達(dá)式過長或邏輯復(fù)雜時，可以綁定一個計算屬性，一般當(dāng)條件多于兩個時，都可以使用data或者computed

<div id="app">
    <div :class="classes"></div>
</div>
<script>
var app = new Vue({
    el:'#app',
    data:{
        isActive:true,
        isError:null
    },
    computed:{
        classes(){
            return {
                active:this.isActive && !this.error,
                'text-fail':this.error && this.error.type ==='fail'
            }
        }
    }
})
</script>

二、數(shù)組語法
1、當(dāng)需要應(yīng)用多個class時，可以使用數(shù)組語法，給:class綁定一個數(shù)組，應(yīng)用一個class列表：

<div id="app">
    <div :class="[atvieCls,errorCls]"></div>
</div>
<script>
var app = new Vue({
    el:'#app',
    data:{
        atvieCls:'active',
        errorCls:'error'
    }
})
</script>

最后渲染的結(jié)果：<div class="active error"></div>
2、使用三元表達(dá)式，根據(jù)條件切換class（當(dāng)數(shù)據(jù)isActive為真時，樣式active才會被應(yīng)用）

<div id="app">
    <div :class="[isActive ? activeCls : '',errorCls]"></div>
</div>
<script>
var app = new Vue({
    el:'#app',
    data:{
        isActive:true,
        atvieCls:'active',
        errorCls:'error'
    }
})
</script>

渲染的結(jié)果為：<div class="active error"></div>
3、class有多個條件時，這樣寫較為煩瑣，可以在數(shù)組語法中使用對象語法：

<div id="app">
    <div :class="[{'active':isActive},errorCls]"></div>
</div>
<script>
var app = new Vue({
    el:'#app',
    data:{
        isActive:true,
        errorCls:'error'
    }
})
</script>

渲染的結(jié)果為：<div class="active error"></div>
4、與對象語法一樣，也可以使用data、computed、method三種方法，以計算屬性為例：

<div id="app">
    <button :class="classes"></button>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            size: 'large',
            disabled: true
        },
        computed: {
            classes: function () {
                return [
                    'btn',
                    {
                        ['btn-'+this.size]: this.size!=='',
                        ['btn-disabled']: this.disabled,
                    }
                ]
            }
        }
    })
</script>

最后渲染結(jié)果：<div class="btn btn-large btn-disabled"></div>
三、在組件上使用
如果直接在自定義組件上使用class或:class，樣式規(guī)則會直接應(yīng)用到這個組件的根元素上，例如聲明一個簡單的組件：

<script>
    Vue.component('my-component', {
        template: '<p class="article">一些文本</p>'
    })
</script>

<div id="app">
    <my-component :class="'active':isActive"></my-component>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            isActive: true
        }
    })
</script>

最終組件渲染后的結(jié)果為：<p class="article active">一些文本</p>文章來源地址http://www.zghlxwxcb.cn/news/detail-642578.html

到了這里，關(guān)于vue動態(tài)綁定class的幾種方法的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！