vue.js中v-bind怎么用

小編給大家分享一下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
  }
});

上面這里修改了 obj 的  toString 方法（但準確的說，這里不是修改，而是添加。一開始的 obj 對象上自身是沒有 toString 方法的，它繼承了 Object.prototype.toString，但這里我們執行 obj.toString  = function..... 實際上是為它添加了一個 toString 方法，使得它執行的時候，不用再去調用繼承自 Object 的方法），渲染結果如下：

<div id="app">
  <p title="edited in toString!">content</p>
</div>

這里就進一步證實了我們的猜想。

（2）數組類型

數組類型的 toString 方法和對象類型的有所不同，它將返回和執行 arr.join(',') 相同的結果。如 [1, 2, 3].toString() 將返回 “1,2,3”。下面進行測試：

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

渲染結果如下：

<div id="app">
  <p title="1,2,3">content</p>
</div>

仍然跟預期結果一樣。

（3）其它類型

1. number 類型，正常執行 toString，包括數字0，結果都正常渲染成對應的字符串；

2. boolean 類型，true 正常渲染成字符串 "true"，但 false 雖然執行 toString 方法將返回 "false" 字符串，但是卻沒有渲染出來；

3. null / undefined 類型，二者沒有 toString 方法，也沒有渲染出來。

顯然，在執行 toString 方法之前，vue 內部應該先做了類型校驗，滿足條件才輸出。而且這里不是簡單的真 / 假值校驗，因為 、0 雖為假值，但最終卻像真值一樣渲染了出來。具體如何實現，可能需要參考 vue 的源碼了，這里不再深究。

四、多 html 屬性值綁定

一個的 html 屬性值，可能包含許多內容，需要我們進行一些操作，將多個數據綁定到一個屬性上，這里我們可以考慮像前面一樣，通過如 “+” 等運算符號等實現字符串的連接操作。但是事實上，字符串連接麻煩又易錯，不易于維護。于是我們可以考慮像前面一樣向指令預期值中存入一個對象或數組，來實現多個數據綁定到一個屬性上的作用。

（1）利用對象綁定

<div id="app">
  <p v-bind:title="obj">content</p>
</div>
......
var obj = {
  name: 'Dale',
  age: 22
};

// 利用 for-in 循環遍歷對象屬性，拼接成字符串
obj.toString = function () {
  var str = '';
  for(var i in this) {
    str += i + ': ' + this[i] + '; ';
  }
  return str;
};

// 防止 toString 方法自身被遍歷出來
Object.defineProperty(obj, 'toString', {'enumerable': false});

var vm = new Vue({
  el: '#app',
  data: {
    obj: obj
  }
});

輸出結果：

<div id="app">
  <p title="name: Dale; age: 22; ">content</p>
</div>

上面通過 for-in 循環在 toString 方法中得到所有可遍歷的屬性以及對應的屬性值，然后將其拼接成字符串再進行輸出，可以實現多屬性值綁定，至于如何拼接，可以自己在 toString 方法中進行不同的實現 。

（2）利用數組綁定

<div id="app">
  <p v-bind:title="arr">content</p>
</div>
......
var arr = [1, 2, 3];

arr.toString = function () {
  return this.join(' ');
};

var vm = new Vue({
  el: '#app',
  data: {
    arr: arr
  }
});

渲染結果如下：

<div id="app">
  <p title="1 2 3">content</p>
</div>

相比于對象字符串拼接，數組的拼接操作則顯得簡單得多，可以直接在 toString 方法返回 join 方法的返回值，默認的 toString 方法的返回值其實就和 join(',') 的返回值相同。

（3）思考

其實想想一個 html 屬性綁定多個值的情況其實并不少見，最典型的應該是 class 和 style 屬性，或者說我們經常都會接觸到這樣的場景。

但我們這里的實現，看起來還是問題比較多，數組的綁定還好，對象的綁定，除了每次要重寫 toString 方法以外，我們還需要設置 toString 方法變得不可枚舉，否則它將在 for-in 循環中被遍歷出來（一般情況下，這不是我們希望看到的結果），這樣無疑會增加很多重復性工作，而 vue 為我們考慮到了這一點，它在框架內部進行了一些優化操作。

五、vue 對于 class 和 style 綁定的增強

基于上面的情況，vue 對 class 和 style 這兩個 html 屬性進行了一定程度的增強。vue 具體的實現方式請參考其源碼，這里僅給出基于上面的結論的實現方式。

（1）基于對象針對 class 的增強

<div id="app">
  <p v-bind:class="obj">content</p>
</div>
......
var obj = {
  c1: true,
  c2: false,
  c3: null,
  c4: undefined
};

obj.toString = function () {
  var str = '';
  for(var i in this) {
    if(this[i]) {
      str += i + ' ';
    }
  }

  return str;
};

// 防止 toString 方法自身被遍歷出來
Object.defineProperty(obj, 'toString', {'enumerable': false});

var vm = new Vue({
  el: '#app',
  data: {
    obj: obj
  }
});

渲染結果：

<div id="app">
  <p class="c1">content</p>
</div>

同樣是 for-in，與之前不同的是，當檢測到 obj 的某個屬性值為真的時候，則將這個屬性的屬性名添加到綁定的元素的 class 上。當然，我這里只是一個模擬實現，vue 實際的實現方式，請參考 vue 源碼。

（2）基于數組對 class 的增強

<div id="app">
  <p v-bind:class="arr">content</p>
</div>
.......
var arr = ['c1', 'c2', 'c3'];

arr.toString = function () {
  return this.join(' ');
};

var vm = new Vue({
  el: '#app',
  data: {
    arr: arr
  }
});

渲染結果：

<div id="app">
  <p class="c1 c2 c3">content</p>
</div>

這里基本和前面的實現思路一樣，利用 join(' ') 實現。

（3）基于對象對 style 的增強

<div id="app">
  <p v-bind:>content</p>
</div>
......
var obj = {
  color: 'red',
  backgroundColor: '#ddd',
  fontSize: '20px',
};

obj.toString = function () {
  var str = '';
  for(var i in this) {
    if(this[i]) {
      str += i + ':' + this[i] + ';';
    }
  }

  return str;
};

// 防止 toString 方法自身被遍歷出來
Object.defineProperty(obj, 'toString', {'enumerable': false});

var vm = new Vue({
  el: '#app',
  data: {
    obj: obj
  }
});

渲染結果：

<div id="app">
  <p >content</p>
</div>

這里基本和前面的實現思路一樣，利用 for-in 配合字符串拼接實現。

（4）基于數組對 style 的增強

<div id="app">
  <p v-bind:>content</p>
</div>

<script>
var arr = [{
    color: "red"
  }, {
    backgroundColor: '#ddd'
  }, {
    fontSize: '20px'
  }];

arr.toString = function () {
  var str = '';
  arr.forEach(function (val, key) {
    for(var i in val) {
      str += i + ':' + val[i] + ';';
    }
  });
};

var vm = new Vue({
  el: '#app',
  data: {
    arr: arr
  }
});

渲染結果：

<div id="app">
  <p >content</p>
</div>

這里通過 forEach 方法遍歷了數組，然后將數組元素（也就是這里我們的樣式對象）再通過 for-in 遍歷并拼接成樣式字符串達到效果。

以上是“vue.js中v-bind怎么用”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！