深入解析 Vue 3 中 v-model 与表单元素的绑定机制

v-model 是 Vue 中最强大的指令之一，它简化了表单数据双向绑定的实现。本文将系统梳理各种 HTML 表单元素与 v-model 的绑定关系，特别是那些容易引起困惑的类型。

一、v-model 的本质

v-model 是一个语法糖，它实际上是 :value 和 @input 的组合（对于大多数元素）。在 Vue 3 中，这个机制变得更加灵活和强大。

<!-- 等价关系 -->
<input v-model="text">
<!-- 等同于 -->
<input :value="text" @input="text = $event.target.value">

二、文本输入类元素

1. 普通文本输入 (type="text")

绑定值：value 属性
触发事件：input 事件

<input type="text" v-model="message">
<!-- 等价于 -->
<input type="text" :value="message" @input="message = $event.target.value"
>

2. 多行文本 (textarea)

绑定值：value 属性
触发事件：input 事件

<textarea v-model="content"></textarea>

注意：<textarea>{{ content }}</textarea> 这种插值语法不会生效。

三、选择类元素

1. 单选框 (type="radio")

这是最容易引起困惑的表单元素之一。

绑定值：checked 状态
触发事件：change 事件
特殊机制：通过比较 v-model 绑定的值和 value 属性来决定是否选中

<input type="radio" value="yes" v-model="answer"> 是
<input type="radio" value="no" v-model="answer"> 否

等效于： 

<input type="radio" value="yes" :checked="answer==='yes'" @change="answer='yes'"> 是
<input type="radio" value="no"  :checked="answer==='no'" @change="answer='no'"> 否

关键点：

• 同一组的 radio 必须绑定相同的 v-model

• v-model 绑定的值会与每个 radio 的 value 进行比较

• 匹配时自动设置 checked 属性

• 用户选择时会将该 radio 的 value 赋给绑定的变量

类型转换：

• 默认将 value 视为字符串

• 如果需要其他类型，使用 :value 绑定：

  <input type="radio" :value="true" v-model="isAgree"> 同意

2. 复选框 (type="checkbox")

分为单个和多个两种情况。

单个复选框：

绑定值：checked 状态
触发事件：change 事件
绑定类型：布尔值

<input type="checkbox" v-model="isChecked">
<!-- 等价于 -->
<input type="checkbox" :checked="isChecked" @change="isChecked = $event.target.checked"
>

多个复选框（数组绑定）：

绑定值：checked 状态
触发事件：change 事件
绑定类型：数组

<input type="checkbox" value="vue" v-model="skills"> Vue
<input type="checkbox" value="react" v-model="skills"> React

选中时，value 会被添加到数组中，取消选中时移除。

3. 下拉选择框 (select)

单选：

绑定值：选中的 option 的 value
触发事件：change 事件

<select v-model="selectedCity"><option value="bj">北京</option><option value="sh">上海</option>
</select>

多选（添加 multiple 属性）：

绑定值：所有选中 option 的 value 数组
触发事件：change 事件

<select v-model="selectedCities" multiple><option value="bj">北京</option><option value="sh">上海</option>
</select>

四、特殊输入类型

1. 数字输入 (type="number")

绑定值：valueAsNumber 或 value
触发事件：input 事件
类型转换：自动转换为 Number 类型

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

2. 范围滑块 (type="range")

绑定值：value 属性
触发事件：input 事件

<input type="range" v-model="volume" min="0" max="100">

3. 日期时间输入 (type="date", type="time" 等)

绑定值：value 属性（格式化为字符串）
触发事件：input 事件

<input type="date" v-model="birthday">

五、自定义组件的 v-model

在 Vue 3 中，自定义组件的 v-model 行为有了重大变化：

<CustomInput v-model="searchText" />
<!-- 等价于 -->
<CustomInput :modelValue="searchText"@update:modelValue="newValue => searchText = newValue"
/>

可以在组件中通过 defineProps 和 defineEmits 来处理：

// 子组件
const props = defineProps(['modelValue'])
const emit = defineEmits(['update:modelValue'])

六、最佳实践与常见问题

1. 类型一致性：确保 v-model 绑定的变量类型与 value 类型匹配

2. 性能考虑：对于大型表单，考虑使用 lazy 修饰符减少更新频率

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

3. 修饰符：

   • .number：自动将输入转为数字

   • .trim：自动去除首尾空格

七、总结对比表

理解这些绑定差异将帮助您更高效地使用 Vue 处理表单逻辑，避免常见的陷阱。特别是在处理 radio 和 checkbox 时，明确绑定机制可以节省大量调试时间。