v-model 用在 input 元素上时
v-model
虽然很像使用了双向数据绑定的 Angular 的 ng-model
,但是 Vue 是单项数据流,v-model
只是语法糖而已:↓
<input v-model="sth" />
<input v-bind:value="sth" v-on:input="sth = $event.target.value" />
第一行的代码其实只是第二行的语法糖。然后第二行代码还能简写成这样:↓
<input :value="sth" @input="sth = $event.target.value" />
要理解这行代码,首先你要知道 input
元素本身有个 oninput 事件,这是 HTML5 新增加的,类似 onchange
,每当输入框内容发生变化,就会触发 oninput
,把最新的value
传递给 sth
。
如果你不知道 $event 是从哪来的,那你需要点击它再复习一下文档。
我们仔细观察语法糖和原始语法那两行代码,可以得出一个结论:
在给 <input /> 元素添加 v-model 属性时,默认会把 value 作为元素的属性,然后把 'input' 事件作为实时传递 value 的触发事件