关于vue.js v-bind 的一些理解和思考

一、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>

二、指令预期值

上面这种 v-bind 这也是我们对于 vue 指令最初的理解，但实际上，vue 指令的预期值（如 v-bind:class="classProperty" 中，v-bind 是指令，: 后面的 class 是参数，而 classProperty 则在官方文档中被称为“预期值”），除了像上面那样绑定一个字符串类型变量，其实它是支持一个单一 JavaScript 表达式 （v-for 除外）。
所以在这里，我们就可以有更多的选择，例如：

（1）执行运算

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

最后渲染的结果：

<div id="app">  <p title="title1 title2">html属性不能使用双大括号形式绑定，只能使用v-bind指令</p></div>

（2）执行函数等

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

最后渲染的结果：

<div id="app">  <p title="title content">html属性不能使用双大括号形式绑定，只能使用v-bind指令</p></div>

三、支持的数据类型

上面的内容，指令预期值得到的都是字符串类型的数据，但实际上，我们知道 js 有很多数据类型，它如果放入其中呢？

（1）对象类型

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

为什么一来就选择对象类型呢？答案是它比较有代表性，它渲染结果如下：

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

诶，这个怎么有点眼熟？有点像...没错！对象的 toString 方法的返回值！为了验证我们的猜想，我们进行进一步的测试：

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