Vue 的 v-model用法实例

同样地，在页面中的 input 输入框内手动输入值，变量 x 的值也会随之改变。这就是双向绑定。实质上述使用 v-model 的代码等价于如下代码：v-model 帮我们做的事就是，为 input 的 value 值设置一个动态绑定，然后在输入框的 input 事件触发后实时修改动态绑定的 value 的变量值。因此 v-model 实质是上述方式的语法糖。所有修饰符都是起一个辅助的作用，其实可以在函数里自己判断条件实现。但是，我们有时不需要实时记录结果，只需要记录最终输入的结果值就可以了。input 的原生 DOM 事件中还有一个change 事件，该事件是在输入框失去焦点时 或 按下回车键时 执行的。v-model 里以.lazy 修饰符的方式切换至该监听模式。.number.number修饰符是在输入内容改变后进行变量赋值时，自动使用 parseFloat() 函数将其变成数字。