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

2024年3月14日 173次阅读 来源: 1000copy

绑定表单控件和绑定普通控件并无二致。但是因为控件绑定常常涉及到双向绑定，此时使用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
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞