在 Vue 中，处理用户输入的表单时，v-model 是一个非常核心且强大的指令，它能实现数据的双向绑定，让我们从繁琐的事件监听和数据同步中解放出来。本文将带你全面了解 v-model 的用法、适用的表单类型、绑定值的变化，以及使用修饰符的技巧。
1. v-model 是什么？
通常我们在绑定一个 输入框时，需要手动设置 :value 和监听 @input 来同步数据：
<input :value="text" @input="event => text = event.target.value">
这既繁琐又容易出错。使用 v-model，我们可以简化为：
<input v-model="text">
v-model 本质上是语法糖，它会自动帮我们做以下两件事：
- 绑定表单元素的值（例如 value 或 checked）
- 监听合适的事件（如 input 或 change）
2. 基本用法
2.1 文本输入框
<p>Message is: {{ message }}</p>
<input v-model="message" placeholder="edit me" />
这会实现用户输入和 message 变量的同步更新。
注意： 对于中文、日文等使用 IME 的语言，v-model 会在输入确认后才更新数据；如果希望在输入拼写阶段就更新，请使用 @input 监听器代替。
2.2 多行文本（textarea）
<textarea v-model="message" placeholder="请输入多行内容"></textarea>
<p>Multiline message:</p>
<p style="white-space: pre-line;">{{ message }}</p>
在 中不能使用插值表达式（如 {{ text }}），只能使用 v-model。
2.3 复选框
单个复选框（布尔值）
<input type="checkbox" v-model="checked">
<label>是否选中：{{ checked }}</label>
多个复选框绑定数组
<input type="checkbox" value="Jack" v-model="checkedNames"> Jack
<input type="checkbox" value="John" v-model="checkedNames"> John
<input type="checkbox" value="Mike" v-model="checkedNames"> Mike
<p>选中项：{{ checkedNames }}</p>
checkedNames 将是包含所有选中项的数组。
2.4 单选按钮
<input type="radio" value="One" v-model="picked"> One
<input type="radio" value="Two" v-model="picked"> Two
<p>选中：{{ picked }}</p>
当用户选择其中一个选项时，picked 会被设为对应的 value。
2.5 下拉选择器（select）
单选
<select v-model="selected">
<option disabled value="">请选择</option>
<option>A</option>
<option>B</option>
</select>
<p>当前选择：{{ selected }}</p>
多选
<select v-model="selected" multiple>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<p>当前多选值：{{ selected }}</p>
动态渲染选项
<select v-model="selected">
<option v-for="opt in options" :value="opt.value">{{ opt.text }}</option>
</select>
const selected = ref('A')
const options = ref([
{ text: 'One', value: 'A' },
{ text: 'Two', value: 'B' },
{ text: 'Three', value: 'C' }
])
3. 值绑定（非字符串）
有时候，我们希望绑定的数据不是字符串，而是布尔、对象等。
3.1 true-value / false-value（仅复选框）
<input type="checkbox" v-model="toggle" true-value="yes" false-value="no">
此时 toggle 的值会是 'yes' 或 'no'。你也可以使用 v-bind 动态绑定：
<input type="checkbox" v-model="toggle" :true-value="trueVal" :false-value="falseVal">
3.2 对象绑定
<select v-model="selected">
<option :value="{ id: 1, name: 'Vue' }">Vue</option>
</select>
绑定的值将是一个对象而非字符串。
4. 修饰符使用技巧
.lazy
默认是监听 input 事件，添加 .lazy 后将变成监听 change：
<input v-model.lazy="msg">
.number
将输入值自动转换为数字：
<input v-model.number="age">
适合处理数值型输入，尤其在 时会自动启用。
.trim
自动去除用户输入两端的空格：
<input v-model.trim="name">
5. v-model 与组件
当我们自定义组件时，也可以使用 v-model 让组件支持双向绑定。Vue 会自动将 v-model 绑定为 modelValue prop 和 update:modelValue 事件。
举个例子：
<MyInput v-model="inputVal" />
组件内部接收 modelValue 作为输入，并在变化时通过 emit('update:modelValue', newValue) 通知外部更新。
总结：v-model 的优势
相比传统 DOM 操作方式，Vue 的 v-model 提供了：
-
更少的模板代码和更清晰的语义；
-
更可靠的数据同步机制；
-
支持对象、布尔值等非字符串类型绑定；
-
修饰符提供了更灵活的控制；
-
在自定义组件中依然适用，提升组件的复用性。
掌握好 v-model，你将能更高效地开发各种复杂交互
