文章內容源於《Vue.js實戰》

一、瞭解v-bind指令

首先介紹基本用法和它的語法糖，主要用法是動態更新HTML元素上的屬性：

<div id="app" >
	<a v-bind:href="url">連結<a>
	<img v-bind:src="imgUrl">
	
	<a :href ="url">連結<a>
	<img :src="imgUrl">
</div>
<script>
	var app =new Vue({
	el :' #app ',
	data: {
		url:'https://www.github.com',
		imgUrl:'http://xxx.xxx.xx/img.png'
	})
</script>
 

在資料繫結中，最常見的兩個需求就是元素的樣式名稱class和內聯樣式style的動態繫結，他們也是html屬性，因此也可以使用v-bind計算出表示式最終的字串就可以，不過有時候表示式的邏輯較為複雜，使用字串拼接方法閱讀和維護比較難，所以vue,js曾倩了對class和style的繫結。

二、繫結class的幾種方式

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會擁有類名active，為false時則沒有。最終選自然結果為：

<div class="active"></div>

物件中也可以傳入多個屬性，來動態切換class。另外，: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'
            }
        }
    }
});

2、陣列語法

當需要應用多個class時，可以使用陣列語法，給: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'
    }
});

這樣樣式error會始終應用，當資料isActive為真時，樣式activeCls才會被應用。

class有多個條件時，這樣寫會比較煩瑣，可以在陣列語法中使用物件語法。當然，與物件語法一樣，也可以使用data、computed和methods三種方法，如下。

<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
                }
            ]
        }
    }
});

3、在元件上使用（看書到後面章節詳細介紹，這裡先不寫了）

4、繫結內聯樣式

使用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'
        }        
    }
})

應用多個樣式時，可以使用陣列語法：

<div :style="[styleA,styleB]">文字</div>

在實際業務中， :style 的陣列語法並不常用，因為往往可以寫在一個物件裡面；而較常用的應當是計算屬性。

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