认识

2023年04月22日

柏拉文

越努力，越幸运

一、认识

---

v-model 指令既可以作用于普通表单元素，又可以作用于组件。它是一个语法糖，用于实现双向绑定，即数据驱动DOM，DOM 的变化反过来影响数据。

• 可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。

• 可以用 v-model 指令在自定义组件上 <myComp></myComp> 创建双向数据绑定。

1.1 忽略初始值

v-model 会忽略所有表单元素的 value、checked、selected attribute 的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。

1.2 随表单控件类型不同而不同

v-model 在内部为不同的输入元素使用不同的 property 并抛出不同的事件:

• text 和 textarea 元素使用 value property 和 input 事件

• select 字段将 value 作为 prop 并将 change 作为事件。

二、修饰符

---

2.1 .lazy

v-model.lazy 取代 input 监听 change 事件

2.2 .number

v-model.number 输入字符串转为有效的数字

2.3 .trim

v-model.trim 输入首尾空格过滤