詳解vue中v-model和v-bind系結數據的異同

vue的模板採用DOM模板，也就是說它的模板可以當做DOM節點執行，在瀏覽器下不報錯，系結數據有三種方式，一種是插值，也就是{{name}}的形式，一種是v-bind，還有一種是v-model。{{name}}的形式比較好理解，就是以文字的形式和範例data中對應的屬性進行系結。比如：

var app = new Vue({
 el: '#app',
 template: '<div @click="toggleName">{{name}}</div>',
 data: {
 name: 'tom',
 },
 method: {
 toggleName() {
 this.name = this.name === 'tom' ? 'sony' : 'tom'
 },
 },
})

上面的字串模板中，有一個{{name}}，它和data.name是系結的，當data.name發生變化時，檢視也發生變化。

但是v-bind和v-model這兩種系結比較難區分，特別是在表單元素中，剛開始會混淆到底應該怎麼使用。

v-bind

首先來看下v-bind，它的用法是後面加冒號，跟上html元素的attributions，例如：

<p v-bind:class="classed">

這裏的v-bind:class會產生什麼效果呢？實際上，首先你可以看下如果不加v-bind:，也就是：<p class="classed">，這只是一個普通的p元素，含有一個.classed的類，沒有任何數據參與進來。

當加上v-bind:之後，就不一樣了。它的值classed不是字串，而是vue範例對應的data.classed的這個變數。也就是說data.classed是什麼值，它就會給class屬性傳遞什麼值，當data.classed發生變化的時候，class屬性也發生變化，這非常適合用在通過css來實現動畫效果的場合。除了class，其他大部分html原始的屬性都可以通過這種方式來系結，而且爲了方便，它可以直接縮寫成冒號形式，例如：

var app = Vue({
 el: '#app',
 template: '<img :src="src">',
 data: {
 src: '',
 },
 beforeMount() {
 fetch(...).then(...).then(res => this.src = res.src) // 這裏修改了data.src
 },
})

上面這段程式碼中，預設情況下data.src是空字串，也就說不會有圖片顯示出來，但是當從遠端獲取到圖片地址之後，更新了data.src，圖片就會顯示出來了。

v-model

v-model主要是用在表單元素中，它實現了雙向系結。雙向系結大家都非常熟了，簡單的說就是預設情況下，它跟上面兩種情況的數據系結是一樣的，範例的data.name發生變化的時候，對應的試圖中也會發生變化。但是v-model系結後，它還會反過來，在input中手動輸入新的內容，會反過來修改data.name的值，如果在檢視中其他地方使用到了data.name，那麼這個地方就會因爲data.name的變化而變化，從而實現關聯動態效果。下面 下麪來舉個栗子：

var app = Vue({
 el: '#app',
 template: '<label><input v-model="name">{{name}}</label>',
 data: {
 name: '',
 },
})

上面<input>中系結了name，那麼當input的value發生變化時，data.name就會跟着發生變化，而data.name變化了{{name}}的地方也會跟着變化。

v-model是一種雙向系結，那麼也就是說，你系結的元素得有機會改變值。所以實際上v-model基本上只會用在input, textarea, select這些表單元素上。

v-bind和v-model混用

有一些情況我們需要v-bind和v-model一起使用。這個時候如果不留神，就會搞亂狀況，分不清哪裏應該怎麼控制。舉個栗子：

<input :value="name" v-model="body">

上面就是一個栗子。data.name和data.body，到底誰跟着誰變呢？甚至，它們會不會產生衝突呢？

實際上它們的關係和上面的闡述是一樣的，v-bind產生的效果不含有雙向系結，所以:value的效果就是讓input的value屬性值等於data.name的值，而v-model的效果是使input和data.body建立雙向系結，因此首先data.body的值會給input的value屬性，其次，當input中輸入的值發生變化的時候，data.body還會跟着改變。

現在的問題是，當這兩個一起使用的時候，誰都優先順序高？誰會無效？實驗證明，v-model將會被使用，v-bind這個時候無效了，因爲它正好系結在value屬性上，如果綁在其他屬性上v-bind是不受影響的。在這種情況下，v-bind失效，即使你修改data.name，input裏面不會有任何變化。

這也說明，v-model建立的雙向系結對輸入型元素input, textarea, select等具有優先權，會強制實行雙向系結，如果你願意的話。
這說明，在單獨的input中，同時使用v-bind和v-model是沒有必要的，雖然不會造成衝突。

注意上面我說道「單獨」，也就是說，在一組輸入中，它們又要另當別論。一組輸入包括單選組、複選組、下拉選項、下拉選項組。

<label for="value in options">
 <input type="checkbox" :value="value" v-model="selected">
</label>

在data中，它們是這樣的：

data: {
 options: [1, 2, 3, 4, 5],
 selected: [],
}

一組複選框，或者一組下拉選項組，也就是select mutiple="true"的情況，它們的結果是一個數組，而非單個值，因此data.selected是一個數組，當一個選項被選中之後，這個選項的value值會被加入到data.selected中（不是按options裏面的順序，而是操作過程中的邏輯）。這個時候:value就是有效的，因爲它表示把options陣列中對應的選項值傳遞給value，並不是雙向系結的意思，而只是傳值過去（當然，當options中對應的值發生變化時，value值也會變化）。相當於說，v-bind負責value的值，v-model負責選中狀態。當然，v-model是雙向系結，介面上你去勾選會影響data.selected的值，你在程式中操作了data.selected，也會反過來影響介面。v-model影響的是勾選效果，而v-bind影響的是值。（實際上，v-bind雖然只是影響值，但是也會影響勾選效果，比如本來一個選框是被勾選的，通過v-bind系結值發生了變化，那麼新來的值就不會在data.selected中，這個選項就不會被勾選。如果沒有被勾選，改變後的值又在data.selected中，那又會被勾選上。）

注意，只有當type="checkbox"是確定的情況下，纔會讓上述情況生效，type值不能是動態值，因爲v-model被多次系結同一個變數時，需要去檢查type值，而如果這個時候type是動態的，比如用:type="type"進行動態系結，就會導致模板編譯報錯。

v-model其實是v-bind和v-on的語法糖

這是vue官方文件中特別指出的，在閱讀到這一句之前，我還對此很模糊，當閱讀到：

<input v-model="something">其實是<input v-bind:value="something" v-on:input="something = $event.target.value">的語法糖
時，這種認識上的模糊就被消除了。

我們這篇文章沒有講到v-on，它其實就是一個事件系結器。我們仔細閱讀一下<input v-bind:value="something" v-on:input="something = $event.target.value">，發現它由兩部分組成：v-bind:value和v-on:input，必須是value屬性和input事件，否則也不會等價於v-model，而且input事件裏面，正好是something等於當前輸入值。

真因爲這一原理，v-model瞬間就不再難理解了。

小結

總之，要區分v-bind和v-model，只需要記住三句話：

1. v-bind是數據系結，沒有雙向系結效果，但不一定在表單元素上使用，任何有效元素上都可以使用；
2. v-model是雙向系結，基本上只用在表單元素上；
3. 當v-bind和v-model同時用在一個元素上時，它們各自的作用沒變，但v-model優先順序更高，而且需區分這個元素是單個的還是一組出現的。

到此這篇關於詳解vue中v-model和v-bind系結數據的異同的文章就介紹到這了,更多相關vue中v-model和v-bind系結數據內容請搜尋it145.com以前的文章或繼續瀏覽下面 下麪的相關文章希望大家以後多多支援it145.com！