如何理解v-model的实质为语法糖

vue的v-model为表单的完成提供了极大的便利，可以进行数据绑定，例如将input框的值和span值绑定，只要重新输入显示值会立即更改。下面我们来分析这一命令是如何实现的。在官方文档中解释这一名令实际仅是一个语法糖。那么首先我们来看看语法糖的概念：

语法糖：指计算机语言中添加的某种语法，这种语法对语言的功能并没有影响，但是更方便程序员使用。通常来说使用语法糖能够增加程序的可读性，从而减少程序代码出错的机会。

再来看看v-model的官方文档

也就是v-modle实际为语法糖。v-model=”something”则表示将value值绑定在something上，当值发生改变时触发绑定的input事件。input事件绑定的函数是将更改后的value值覆盖原value值。所以：

• something即是实时的value值，每一次value值得更改都会触发something改变
• 如果有别的控件绑定something那么input的value值改变改控件的值显示，因此实现了双向绑定

接下来我们看一个例子，改例子中利用v-model实现textarea的剩余字数统计：

 <p>{{text}}<p> <div class="item" id="text">    <label>简述：</label>    <textarea maxlength="300" v-model="text"  ></textarea></div> <div id="icount">    <p id="spann">您还可以输入{{wordc}}字</p> </div>

以下是script部分代码

data () {      return {        text: '',        wordc: '300'      }    },    methods: {      mycou: function (event) {        var a = this.text.length        this.wordc = 300 - a      }    }

效果图