在前端处理表单时,我们常常需要将表单输入框的内容同步给 JavaScript 中相应的变量。手动连接值绑定和更改事件监听器可能会很麻烦:
<input
:value="text"
@input="event => text = event.target.value">
v-model
指令帮我们简化了这一步骤:
<input v-model="text">
另外,v-model
还可以用于各种不同类型的输入,<textarea>
、<select>
元素。它会根据所使用的元素自动使用对应的 DOM 属性和事件组合:
- 文本类型的
<input>
和<textarea>
元素会绑定value
属性 并侦听input
事件; <input type="checkbox">
和<input type="radio">
会绑定checked
属性 并侦听change
事件;<select>
会绑定value
属性 并侦听change
事件。
注意:
v-model
会忽略任何表单元素上初始的value
、checked
或selected
attribute。它将始终将当前绑定的 JavaScript 状态视为数据的正确来源。你应该在 JavaScript 中使用响应式系统的 API来声明该初始值。
如下示例体现 vue 在表单元素上的使用
<script setup lang="ts">
// -- imports
import { ref } from 'vue';
// -- refs
const msg1 = ref('');
const msg2 = ref('');
</script>
<template>
<form>
<div class="demo-1">
<p>input:</p>
<input type="text" v-model="msg1" placeholder="请输入内容" />
<p>您输入的内容是:{{ msg1 }}</p>
</div>
<hr />
<div class="demo-2">
<p>textarea:</p>
<textarea type="text" v-model="msg2" placeholder="请输入内容"></textarea>
<p>您输入的内容是:{{ msg2 }}</p>
</div>
</form>
</template>
演示效果:
<script setup lang="ts">
// -- imports
import { ref } from 'vue';
// -- refs
const checkVal = ref('');
</script>
<template>
<form action="" name="myForm">
<label>性别:</label>
<label>男</label>
<input type="radio" value="男" v-model="checkVal" />
<label>女</label>
<input type="radio" value="女" v-model="checkVal" />
<label>保密</label>
<input type="radio" value="保密" v-model="checkVal" />
<p>您的选择是:{{ checkVal }}</p>
</form>
</template>
演示效果:
提示:单选框需设置 value 属性值便于 v-model 获取。
<script setup lang="ts">
// imports
import { ref } from 'vue';
// -- refs
const heros = ref<string[]>([]);
</script>
<template>
<form action="" name="myForm">
<p>下列英雄角色中定位为法师的是(多选):</p>
<label>诸葛亮</label>
<input type="checkbox" value="诸葛亮" v-model="heros" />
<label>露娜</label>
<input type="checkbox" value="露娜" v-model="heros" />
<label>虞姬</label>
<input type="checkbox" value="虞姬" v-model="heros" />
<label>貂蝉</label>
<input type="checkbox" value="貂蝉" v-model="heros" />
<label>吕布</label>
<input type="checkbox" value="吕布" v-model="heros" />
<p>您的选择是:{{ heros }}</p>
</form>
</template>
效果演示:
提示:多选框应用时,绑定变量的值为数组类型。
<script setup lang="ts">
// -- imports
import { ref } from 'vue';
// -- refs
const selected = ref('');
</script>
<template>
<form action="" name="myForm">
<select name="mySel" v-model="selected">
<option value="">-请选择您所在的城市-</option>
<option value="成都">成都</option>
<option value="上海">上海</option>
<option value="北京">北京</option>
<option value="深圳">深圳</option>
<option value="杭州">杭州</option>
<option value="昆明">昆明</option>
</select>
</form>
<p>您所在的城市是:{{ selected }}</p>
</template>
效果演示:
在默认情况下,v-model
在每次 input
事件触发后将输入框的值与数据进行同步。你可以添加 lazy
修饰符,从而转为在 change
事件之后进行同步:
<!-- 在“change”时而非“input”时更新 -->
<input v-model.lazy="msg" />
如果想自动将用户的输入值转为数值类型,可以给 v-model
添加 number
修饰符:
<input v-model.number="age" type="text" />
当输入类型为 text
时这通常很有用。如果输入类型是 number
,Vue 能够自动将原始字符串转换为数字,无需为 v-model
添加 .number
修饰符。如果这个值无法被 parseFloat()
解析,则返回原始的值。
如果要自动过滤用户输入的首尾空白字符,可以给 v-model
添加 trim
修饰符:
<input v-model.trim="msg" />