vue.js實戰學習——v-bind 及class與 style綁定

注：此內容摘抄自：梁灝的《Vue.js實戰》

注：記得要引入vue.js才能運行哦，文章中貼出的代碼直接復制是不行的，html css js 都放在了一起，而且也沒有引用vue.js。

 

DOM元素經常會動態的綁定一些class類名或style樣式。

1.了解v-bind指令

它的主要用法是動態更新HTML元素上的屬性。

在數據綁定中，最常見的兩個需求就是元素的樣式名稱class和內聯樣式style的動態綁定，他們也是HTML的屬性，因此可以使用v-bind指令。我們只需要用v-bind計算出表達式最終的字符串就可以，不過有時候表達式的邏輯比較復雜時，使用字符串拼接較難閱讀和維護，所以Vue.js增強了對class和style的綁定。

2.綁定class的幾種方式

2-1.對象語法

給v-bind:class設置一個對象，可以動態的切換class

<div class="app1">
    <div :class="{'active':isActive}">我真的是黑色的！</div>
</div>


var app1=new Vue({
    el:'.app1', data:{ isActive:true } });

上面的實例中，類名active依賴於數據isActive，當其為true時，div會擁有類名isActive，為false時則沒有。

對象中也可以傳入多個屬性，來動態切換class。另外，:class 可以和普通的class共存

<div class="app2">
    <div class="static" :class="classes">我本來是黑色的……</div>
</div>

var app2=new Vue({
    el:'.app2',
    data:{
        isActive:true,
        error:null
    },
    computed:{
        classes:function(){
            return {
                active:this.isActive && !this.error,
                'text-fail':this.error && this.error.type==='fail'
            }
        }
    }
});

當:class 的表達式過長或邏輯復雜時，還可以綁定一個計算屬性，這是一種很友好和常見的用法，一把的那個條件多余兩個時，都可以使用data或computed，上面的例子就是用使用的計算屬性。

2-2.數組語法

當需要應用多個class時，可以使用數組語法，給:class綁定一個數組，應用一個class列表

<div class="app3">
    <div :class="[isActive ? activeCls:' ',errorCls]">三元表達式</div>
</div>

var app3=new Vue({
    el:'.app3',
    data:{
        isActive:true,
        activeCls:'active',
        errorCls:'error'
    }
});

也可以使用三元表達式來根據條件切換class，如上。

樣式error會始終應用，當數據isActive為真時，樣式activeCls才會被應用。class有多個條件時，這樣寫會比較煩瑣，可以在數組語法中使用對象語法。

<div class="app4">
    <div :class="[{'active':isActive},errorCls,classes]">我看看</div>
</div>

var app4=new Vue({
    el:'.app4',
    data:{
        isActive:true,
        errorCls:'error',
        size:'large',
        disabled:true
    },
    computed:{
        classes:function(){
            return [
                'btn',
                {
                    ['btn-'+this.size]:this.size!=='',
                    ['btn-disabled']:this.disabled
                }
            ]
        }
    }
});         

當然，與對象語法一樣，也可以使用data、computed和methods三種方法，如上。

2-3.在組件上使用

組件后面會講，這里就不介紹了，跳過。

3.綁定內聯樣式

使用v-bind:style（即  :style）可以給元素綁定內聯樣式，方法與 :class 類似，也有對象語法和數組語法，看起來很像直接現在元素上寫CSS

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

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

CSS屬性名稱使用駝峰命名或短橫分格。

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

<div class="app6">
    <div :style="styles">文本</div>
</div>

var app6=new Vue({
    el:'.app6',
    data:{
        styles:{
            color:'red',
            fontSize:14+'px'
        }        
    }
})

 

在實際業務中， :style 的數組語法並不常用，因為往往可以寫在一個對象里面；而較常用的應當是計算屬性。

另外，使用 :style  時，Vue.js會自動給特殊的CSS屬性名稱增加前綴，比如transform。

 

 

 

最后給出今天要用到的所有css

<style type="text/css">
    .active{
        color:blueviolet;
        border: 2px solid #00f;
    }
    .error{
        color:red;
    }
    .static{
        background: #0f0;
    }
    .btn{
        outline: dashed;
    }
    .btn-large{ background:#ddd ; } .btn-disabled{ text-decoration:underline ; } </style>

 

注：此內容摘抄自：梁灝的《Vue.js實戰》