Vue学习笔记 —— v-model

v-model

vue中、这类表单元素，使用v-model实现这些标签数据的双向绑定，vue会根据控件类型自动选取正确的方法更新元素

v-mode的本质是一个语法糖。例：

<input v-model="test">

等同于：

<input :value="test" @input="test = $event.target.value">

其中，@input是对输入事件的一个监听，:value="test"是将数据放入到input。

那么这句代码的意思就是，先将变量test绑定到input的value属性上，在为input添加输入监听事件，即@input。

因此，当外部的test变量先改变，input内的value值就会改变；当input内的value值先发生改变时，就会触发input的输入监听事件，执行test=$event.target.value，即将此时的value赋值给外部的变量test，从而实现双向绑定

v-model的修饰符

.lazy、.trim和.number

// 在每次 input 事件触发后将输入框的值与数据进行同步，添加 lazy 修饰符，从而转变为使用 change 事件进行同步
<input v-model.lazy="msg" >