Vue 学习笔记(六)表单输入绑定
表单输入绑定
基础用法
- 可以用 v-model 指令在表单
<input>
、<textarea>
及<select>
元素上创建双向数据绑定。 v-model
本质上不过是语法糖。- 它负责监听用户的输入事件以更新数据,并对一些极端场景进行一些特殊处理。
v-model
会忽略所有表单元素的value
、checked
、selected
attribute 的初始值而总是将 Vue 实例的数据作为数据来源。v-model
在内部为不同的输入元素使用不同的 property 并抛出不同的事件:- text 和 textarea 元素使用
value
property 和input
事件; - checkbox 和 radio 使用
checked
property 和change
事件; - select 字段将
value
作为 prop 并将change
作为事件。
- text 和 textarea 元素使用
修饰符
.lazy
- 在默认情况下,
v-model
在每次input
事件触发后将输入框的值与数据进行同步。 - 可以添加
lazy
修饰符,从而转为在 change 事件_之后_进行同步。
1 | <!-- 在“change”时而非“input”时更新 --> |
.number
- 给
v-model
添加number
修饰符,可以自动将用户的输入值转为数值类型。
1 | <input v-model.number="age" type="number"> |
.trim
- 给 v-model 添加 trim 修饰符,可以自动过滤用户输入的首尾空白字符。
1 | <input v-model.trim="msg"> |
本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 姚永坤的小窝!
评论