如何理解v-model就是语法糖?

绑定表单控件和绑定普通控件并无二致。但是因为控件绑定常常涉及到双向绑定,此时使用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…

    原文作者:1000copy
    原文地址: https://segmentfault.com/a/1190000007662815
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞