VUE学习-表单输入绑定

2024-09-18 18:03:38

表单输入绑定

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>

修饰符

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

<!-- 在“change”时而非“input”时更新 -->

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

.number: 自动将用户的输入值转为数值类型
```
<input v-model.number="age" type="number">
```
.trim: 自动过滤用户输入的首尾空白字符
```
<input v-model.trim="msg">
```

最新文章

热门文章