VUE学习-表单输入绑定

表单输入绑定

v-model

可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。

v-model 会忽略所有表单元素的 value、checked、selected attribute 的初始值而总是将 Vue 实例的数据作为数据来源。

<select v-model="Sex">
	<option value="none">--请选择--</option>
	<option value="Man">Man</option>
	<option value="Woman">Woman</option>
</select>

v-bind

可以把值绑定到 Vue 实例的一个动态 property 上，这时可以用 v-bind 实现，并且这个 property 的值可以不是字符串。

<select v-model="selected">
	<option v-for="option in options" v-bind:value="option.value">
	{{ option.text }}
	</option>
</select>
<span>Selected: {{ selected }}</span>

修饰符

1. .lazy: 转为在 change 事件之后进行同步

   <!-- 在“change”时而非“input”时更新 -->
   <input v-model.lazy="msg">
   

2. .number: 自动将用户的输入值转为数值类型

   <input v-model.number="age" type="number">
   

3. .trim: 自动过滤用户输入的首尾空白字符

   <input v-model.trim="msg">