一、v-bind 初探

它是一個 vue 指令，用于綁定 html 屬性，如下：

<div id="app">  <p v-bind:title="title">html屬性不能使用雙大括號形式綁定，只能使用v-bind指令</p></div>......var vm = new Vue({  el: '#app',  data: {    title: 'title content'  }});

這里的 html 最后會渲染成：

<div id="app">  <p title="title content">html屬性不能使用雙大括號形式綁定，只能使用v-bind指令</p></div>

二、指令預(yù)期值

上面這種 v-bind 這也是我們對于 vue 指令最初的理解，但實際上，vue 指令的預(yù)期值（如 v-bind:class="classProperty" 中，v-bind 是指令，: 后面的 class 是參數(shù)，而 classProperty 則在官方文檔中被稱為“預(yù)期值”），除了像上面那樣綁定一個字符串類型變量，其實它是支持一個單一 JavaScript 表達(dá)式 （v-for 除外）。
所以在這里，我們就可以有更多的選擇，例如：

（1）執(zhí)行運算

<div id="app">  <p v-bind:title="t1 + ' ' + t2">html屬性不能使用雙大括號形式綁定，只能使用v-bind指令</p></div>......var vm = new Vue({  el: '#app',  data: {    t1: 'title1',    t2: 'title2'  }});

最后渲染的結(jié)果：

<div id="app">  <p title="title1 title2">html屬性不能使用雙大括號形式綁定，只能使用v-bind指令</p></div>

（2）執(zhí)行函數(shù)等

<div id="app">  <p v-bind:title="getTitle()">html屬性不能使用雙大括號形式綁定，只能使用v-bind指令</p></div>......var vm = new Vue({  el: '#app',  data: {    getTitle: function () {      return 'title content';    }  }});

最后渲染的結(jié)果：

<div id="app">  <p title="title content">html屬性不能使用雙大括號形式綁定，只能使用v-bind指令</p></div>

三、支持的數(shù)據(jù)類型

上面的內(nèi)容，指令預(yù)期值得到的都是字符串類型的數(shù)據(jù)，但實際上，我們知道 js 有很多數(shù)據(jù)類型，它如果放入其中呢？

（1）對象類型

<div id="app">  <p v-bind:title="obj">content</p></div>......var obj = {};var vm = new Vue({  el: '#app',  data: {    obj: obj  }});

為什么一來就選擇對象類型呢？答案是它比較有代表性，它渲染結(jié)果如下：

<div id="app">  <p title="[object Object]">content</p></div>

誒，這個怎么有點眼熟？有點像...沒錯！對象的 toString 方法的返回值！為了驗證我們的猜想，我們進(jìn)行進(jìn)一步的測試：

<div id="app">  <p v-bind:title="obj">content</p></div>......var obj = {};obj.toString = function () {  return 'edited in toString!';};var vm = new Vue({  el: '#app',  data: {    obj: obj  }});