表单是 Web 应用中最常见的交互方式。登录注册、搜索查询、数据提交...几乎每个应用都离不开表单。传统开发中，我们需要手动获取表单值、监听输入变化、更新数据，代码繁琐且容易出错。
Vue 的 v-model 指令让表单处理变得简单优雅。它自动实现了数据到视图、视图到数据的双向同步，你只需要关注业务逻辑，不用再操心繁琐的 DOM 操作。
表单绑定本质上是数据的双向流动：
<input v-model="message">
<p>{{ message }}</p>
用户在输入框中打字，message 自动更新，下方显示的内容也随之变化。这一切都是自动的，无需手动监听事件或操作 DOM。
v-model 是一个语法糖，它等价于：
<input
:value="message"
@input="message = $event.target.value"
>
理解这一点很重要，因为：
v-model 背后发生了什么v-modelv-model 的工作原理和使用方式.lazy、.number、.trim 的使用代码简洁
传统方式需要手动获取值、设置值、监听事件。v-model 一行代码搞定。
实时同步
数据变化立即反映到视图，用户输入立即更新数据，无需手动同步。
类型智能
Vue 会根据表单元素类型自动选择正确的属性和事件，无需额外配置。
v-model 支持所有标准表单元素：
| 元素 | 绑定属性 | 触发事件 |
|---|---|---|
| text/textarea | value | input |
| checkbox | checked | change |
| radio | checked | change |
| select | value | change |
Vue 会根据元素类型自动选择正确的绑定方式。
<div id="app">
<form @submit.prevent="submitForm">
<div class="form-group">
<label>用户名</label>
<input type="text" v-model="form.username">
</div>
<div class="form-group">
<label>密码</label>
<input type="password" v-model="form.password">
</div>
<div class="form-group">
<label>邮箱</label>
<input type="email" v-model="form.email">
</div>
<div class="form-group">
<label>性别</label>
<label>
<input type="radio" v-model="form.gender" value="male"> 男
</label>
<label>
<input type="radio" v-model="form.gender" value="female"> 女
</label>
</div>
<div class="form-group">
<label>爱好</label>
<label>
<input type="checkbox" v-model="form.hobbies" value="reading"> 阅读
</label>
<label>
<input type="checkbox" v-model="form.hobbies" value="music"> 音乐
</label>
<label>
<input type="checkbox" v-model="form.hobbies" value="sports"> 运动
</label>
</div>
<div class="form-group">
<label>城市</label>
<select v-model="form.city">
<option value="">请选择</option>
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option value="guangzhou">广州</option>
</select>
</div>
<div class="form-group">
<label>简介</label>
<textarea v-model="form.bio"></textarea>
</div>
<div class="form-group">
<label>
<input type="checkbox" v-model="form.agree"> 同意用户协议
</label>
</div>
<button type="submit">提交</button>
</form>
<pre>{{ form }}</pre>
</div>
<script>
new Vue({
el: '#app',
data: {
form: {
username: '',
password: '',
email: '',
gender: '',
hobbies: [],
city: '',
bio: '',
agree: false
}
},
methods: {
submitForm: function() {
console.log('提交数据：', this.form)
// 发送到服务器...
}
}
})
</script>
v-model 与 value 不要同时使用
v-model 已经绑定了 value，再设置 value 属性会被忽略：
<!-- ❌ 错误：value 会被忽略 -->
<input v-model="text" value="初始值">
<!-- ✅ 正确：在 data 中设置初始值 -->
<input v-model="text">
<!-- data: { text: '初始值' } -->
IME 输入法问题
在使用中文输入法时，v-model 会在拼音输入过程中同步更新。如果需要等输入完成再更新，使用 .lazy 修饰符：
<input v-model.lazy="text">
表单绑定是 Vue 开发中最常用的功能之一：
v-model 是语法糖，有助于理解自定义组件的 v-model.trim、.number 等修饰符能简化很多常见操作接下来，让我们从 v-model 的基本用法开始，逐步掌握各种表单元素的处理技巧。