v-model:双向数据绑定
v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。
特点:
1.当发现内存中数据发生变动时,会影响页面中的显示结果。
2.当页面数据被用户更改时,内存中的数据会随之变化。
3.它只能适用于表单标签:
- 单行文本输入框
- 下拉列表
- 多行文本输入框
- 单选按钮
- 复选按钮
原理: - 就是简化后的属性绑定和事件绑定
<p>
v-model的原理:属性绑定和事件绑定
<input type="text" :value="msg" @input="msg=$event.target.value">
</p>
- 三个修饰符
.lazy
将input事件转换为change事件.number
输入字符串转为数字(内部是使用parseFloat()
方法).trim
将字符串首尾空格去掉,无法去除中间的空格