閑話不多說，接觸過vue的童鞋都知道一個很常用的指令，那就是v-bind，當然它也有簡寫方式——":"（見以下代碼）：

// 完整版
<a v-bind:href="url"></a>

// 簡寫版
<a :href="url"></a>

下面主要介紹一下這個指令的語法：

對象語法

通常，我們會傳給v-bind一個對象，這樣我們可以動態(tài)地切換一些屬性值，比如綁定Class或者Style，像這樣：

// isBlue是布爾值，blue類是否存在取決于isBlue是否為真
<div :class="{ blue: isBlue }"></div> 

// thisFont是變量，字體大小隨thisFont而變化
<div :style="{ fontSize: thisFont + 'px' }"></div> 

// 當然如果屬性多的話，可以這樣寫
<div :style="styleBox"></div> 
// JS
data () {
    return {
        styleBox: {
            fontSize: 20px,
            color: #ccc,
            ...
        }
    }
}

數(shù)組語法

但是最近遇到一個問題，我想動態(tài)地為a鏈接插入不同的tel:號碼，這樣點擊a鏈接時可以喚起手機的號碼識別。但是理想總是豐滿的，現(xiàn)實卻是對象語法并沒有起到作用，這時就輪到數(shù)組語法大顯神威了，且看下面代碼：

// 我的代碼中phoneNumber是計算屬性，返回一個三元表達式
<a :href="tel:+[phoneNumber]"></a>

// 數(shù)組語法還能將多個對象綁定到某個元素上，像這樣
<div :style="[firstStyle, secondStyle, ...]"></div>

// 我們可以將對象和數(shù)組語法結合起來，兼容屬性
<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>

好啦，這里就是我所知道的v-bind指令的用法了，各位不吝賜教噢?。。?/p>