如何理解v-model就是語法糖？

1000copy發表於2016-12-01

繫結表單控制元件和繫結普通控制元件並無二致。但是因為控制元件繫結常常涉及到雙向繫結，此時使用v-model讓它更加簡單。比如checkbox：

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app">
  <input type="checkbox" v-bind:checked="checked">v-bind</input><br/>
  <label>{{ checked }}</label>
</div>
<script>
  var a= new Vue({
    el: `#app`,
    data(){
      return {checked : true} 
    }
  }
)
</script>

把checked資料繫結到input的checked屬性上。然而，這樣的繫結都是單向的，就是說：

  1. 如果checked資料修改了，那麼DOM屬性就會修改

  2. 如果DOM屬性修改了，checked資料並不會修改

所以，當我們點選介面上的輸入控制元件時，儘管此控制元件會打鉤或者去掉打鉤，但是label的文字並不會更新。

由於在vue2.0中，之前有的.sync修飾符本來可以做雙向繫結，但是此特性已經被刪除，所以如果想要使用v-bind做到雙向繫結的話，可以加入事件來監視變化，並更新checked資料即可：

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app">
  <input type="checkbox" ref="c2"v-bind:checked="checked" @change="change">v-bind</input><br/>
<label for="checkbox">{{ checked }}</label>
</div>
<script>
  var a= new Vue({
    el: `#app`,
    data(){
      return {checked : true} 
    },
    methods:{
      change(){
        this.checked = this.$refs.c2.checked
      }
    }
  }
)
</script>

這樣做也太麻煩了，鑑於雙向繫結也比較常用的，因此vue引入了一個指令v-model,可以使用它簡化此工作：

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app">
  <input type="checkbox" v-model="checked">v-model</input><br/>
  <label for="checkbox">{{ checked }}</label>
</div>
<script>
  var a= new Vue({
      el: `#app`,
      data(){return {checked : true} }
    }
  )
</script>

可以用v-model指令在控制元件上建立雙向資料繫結。正如我們已經看到的v-model是v-bind和v-on的語法糖，但是確實很甜。

作者：劉傳君

建立過產品，創過業。好讀書，求甚解。
可以通過 1000copy#gmail.com 聯絡到我

出品

bootstrap小書 https://www.gitbook.com/book/…
http小書 http://www.ituring.com.cn/boo…
Git小書 http://www.ituring.com.cn/boo…

相關文章