v-model特性
你可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。
它会根据控件类型自动选取正确的方法来更新元素。
尽管有些神奇,但 v-model 本质上不过是语法糖。
v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值
总是将 Vue 实例的数据作为数据来源
你应该通过 JavaScript 在组件的 data 选项中声明初始值
v-model 在内部为不同的输入元素使用不同的属性并抛出不同的事件:
1.text 和 textarea 元素使用 -- value 属性 和 input 事件;
2.checkbox 和 radio 元素使用 -- checked 属性 和 change 事件;
3.select 元素使用 -- value 属性 和 change 事件;
修饰符
1.lazy
在默认情况下,v-model
在每次 input
事件触发后将输入框的值与数据进行同步
你可以添加 lazy
修饰符,从而转变为使用 change
事件进行同步:
<!-- 在“change”时而非“input”时更新 -->
<input v-model.lazy="msg" >
2.number
如果想自动将用户的输入值转为数值类型,可以给 v-model 添加 number 修饰符:
<input v-model.number="age" type="number">
3.trim
如果要自动过滤用户输入的首尾空白字符,可以给 v-model 添加 trim 修饰符:
<input v-model.trim="msg">