vue class與style 繫結詳解——小白速會

柴小智發表於2018-04-03
Vue

一、繫結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
       }
    }
});

 

相關文章