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

51 篇文章 1 订阅
6 篇文章 0 订阅

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

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值