vue class與style 綁定詳解——小白速會

一、綁定class的幾種方式

1.對象語法

直接看例子：

    <div id="app3">
        <div :class="{'success':isSuccess,'fail':isFail}">對象綁定class</div>　　//簡單的處理直接使用數據來判斷
        <div :class="classes">計算屬性綁定class</div>　　//當class的表達式過長或邏輯復雜時，使用計算屬性
    </div>

var app3 = new Vue({
    el: '#app3',
    data: {
        isSuccess: true,
        isFail: false,
        error: false
    },
    computed: {
        classes: function(){
            return {
                success: this.isSuccess && !this.error,
                fail: this.isFail || !this.error
            }
        }
    }
});

 2.數組語法

直接看例子：

    <div id="app4">
        <div :class="[successCls,failCls]">綁定多個class屬性</div>　　//用於來綁定多個class屬性
        <div :class="[{'success':isSuccess},failCls]">綁定多個class屬性一</div>　　//動態的判斷添加那些class屬性，是最常用的
    </div>

var app4 = new Vue({
    el: '#app4',
    data: {
        successCls: 'success',
        failCls: 'fail',
        isSuccess: true,
        isFail: false
    }
});

<div id= ”app”>
　　<button :class= ”classes”></button>
</div>
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
                }
            ]
        }
    }
});

使用計算屬性給元素動態設置類名，在業務中經常用到，尤其是在寫復用的組件時，所以在開發過程中，如果表達式較長或邏輯復雜，應該盡可能地優先使用計算屬性。

3.在組件上使用

直接看例子：

    <div id="app5">
        <my-component :class="{'success': isSuccess}"></my-component>
    </div>

Vue.component('my-component',{
   template: '<div class="fail">綁定組件class屬性</div>'
});
var app5 = new Vue({
   el: '#app5',
   data: {
       isSuccess: true
   }
});

這種用法僅適用於自定義組件的最外層是一個根元素，否則會無效，當不滿足這種條件或需要給具體的子元素設置類名時，應當使用組件的props 來傳遞。

 

 二、綁定內聯樣式

直接看例子:

    <div id="app6">
        <div :style="{'color':color,'fontSize':fontSize+'px'}">文本</div>
    </div>

var app6 = new Vue({
   el: '#app6',
   data: {
       color: 'red',
       fontSize: 14
    }
});

大多數情況下， 直接寫一長串的樣式不便於閱讀和維護，所以一般寫在data 或computed 里

    <div id="app6">
        <div :style="style">文本</div>
    </div>

var app6 = new Vue({
   el: '#app6',
   data: {
       style: {
           color: 'red',
           fontSize: 14
       }
    }
});