v-model是vue中实现双向绑定的核心指令，自动适配input、textarea、select、checkbox、radio等表单元素的默认行为，并支持.lazy、.number、.trim等修饰符优化交互；需避免与:value或@input混用，且绑定变量须初始化。
v-model 是 Vue 里最直接、最常用的双向绑定方式，一行代码就能让输入框和数据实时同步——输入时变量自动更新，变量变了输入框也立刻显示新内容。
基础写法：绑定 input、textarea、select 很简单
只要确保变量已在 data（Vue 2）或 ref / reactive（Vue 3）中正确定义，就可以直接用：
-
<input v-model="username">→ 绑定字符串，用户每敲一个字，username 就变 -
<textarea v-model="message"></textarea>→ 多行文本同样适用，无需额外处理换行符 -
<select v-model="selectedCity"><option value="bj">北京</option></select>→ 自动取选中项的 value 值赋给变量
v-model 对不同表单元素的默认行为
它不是统一套逻辑，而是按元素类型智能适配：
- 单个
<input type="checkbox">→ 绑定布尔值（true 表示选中） - 多个 checkbox 共享同一个 v-model → 绑定数组，选中的 value 自动加入/移出
-
<input type="radio">→ 绑定字符串，选中哪个就赋哪个的 value - 多选
<select multiple></select>→ 同样绑定数组，选中多个 option 的 value 构成数组
常用修饰符解决实际小麻烦
加个点号就能避开常见坑：
-
v-model.lazy→ 把更新时机从 input 改为 change（失焦才更新），适合搜索框防抖 -
v-model.number→ 自动调用 parseFloat，把 "123" 变成数字 123，避免字符串拼接 -
v-model.trim→ 输入前后空格自动去掉，校验前不用再手动 .trim()
必须注意的几个关键点
看似顺手，但错一点就会警告或失效：
- 不能同时写
v-model和:value或@input，v-model 已经包含这两部分 - 中文输入法拼音过程中（未上屏），v-model 不会触发更新；要实时响应请改用
@input手动处理 - 绑定的变量不能是 undefined 或 null，初始化得给默认值，比如
username: ''、hobbies: []、agree: false
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
