Vue 基础如何使用 v-model 指令实现表单输入框的双向数据绑定

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）中正确定义，就可以直接用：

1. <input v-model="username"> → 绑定字符串，用户每敲一个字，username 就变
2. <textarea v-model="message"></textarea> → 多行文本同样适用，无需额外处理换行符
3. <select v-model="selectedCity"><option value="bj">北京</option></select> → 自动取选中项的 value 值赋给变量

v-model 对不同表单元素的默认行为

它不是统一套逻辑，而是按元素类型智能适配：

1. 单个 <input type="checkbox"> → 绑定布尔值（true 表示选中）
2. 多个 checkbox 共享同一个 v-model → 绑定数组，选中的 value 自动加入/移出
3. <input type="radio"> → 绑定字符串，选中哪个就赋哪个的 value
4. 多选 <select multiple> → 同样绑定数组，选中多个 option 的 value 构成数组

常用修饰符解决实际小麻烦

加个点号就能避开常见坑：

1. v-model.lazy → 把更新时机从 input 改为 change（失焦才更新），适合搜索框防抖
2. v-model.number → 自动调用 parseFloat，把 "123" 变成数字 123，避免字符串拼接
3. v-model.trim → 输入前后空格自动去掉，校验前不用再手动 .trim()

必须注意的几个关键点

看似顺手，但错一点就会警告或失效：

1. 不能同时写 v-model 和 :value 或 @input，v-model 已经包含这两部分
2. 中文输入法拼音过程中（未上屏），v-model 不会触发更新；要实时响应请改用 @input 手动处理
3. 绑定的变量不能是 undefined 或 null，初始化得给默认值，比如 username: ''、hobbies: []、agree: false