v-model 表单双向绑定
最后更新：2026-10-22
v-model 表单双向绑定
v-model 在表单控件与数据之间建立双向绑定：输入即更新数据，数据变化即回填控件。
| 分组 | 指令 |
|---|---|
| 类型 | 指令 |
| 作用域 | 模板 |
| Vue 版本 | 3.0+ |
| SSR 支持 | 支持 |
📝 语法
<input v-model="name">
<textarea v-model="desc"></textarea>
<input type="checkbox" v-model="agree">
<select v-model="city"><option>武汉</option></select>⚙️ 参数
| expression | 要绑定的数据属性；可加 .lazy（change 时同步）/.number（转数字）/.trim（去空白）修饰符 |
|---|
返回值：指令，无返回值
▶ 示例
修改下面的代码，在预览区实时查看效果：
输出：
输入框里打字，「你好，」后面的内容实时跟着变化。💡 要点
💡 提示 .number 修饰符自动转数字，数值计算场景必备（否则得到字符串）。
ℹ️ 说明 复选框绑数组可收集多选值；绑布尔是单个开关。
⚠️ 注意 v-model 本质是 :value + @input 的语法糖；自定义组件上的 v-model 由 defineModel() 或 modelValue 实现。
🏷️ 相关指令
💡 相关案例
更多案例即将上线。
📚 相关教程
❓ 常见问题
Q 输入框里拿到的是数字还是字符串？
A 默认都是字符串，需要数字加 .number 修饰符（对 number 类型输入框尤其重要）。
Q v-model 在自定义组件上怎么写？
A 组件内声明 modelValue prop + update:modelValue 事件（或 Vue 3.4 的 defineModel()）。
Q 多个输入框能绑同一个数据吗？
A 可以，它们会保持同步：任一输入变化，其他输入立即回填。
