v-model 是 vue 中实现双向绑定的核心指令，支持 input、textarea、radio、checkbox、select 等表单元素，并可通过 .lazy、.number、.trim 修饰符优化行为；自定义组件需接收 modelvalue prop 并触发 update:modelvalue 事件。
v-model 是 Vue 里最直接的双向绑定方式——你输，变量立刻变；你改变量，输入框马上更新。不用写事件监听、不用手动赋值，一行指令就能让表单和数据自动同步。
基础文本框：三步就通
绑定一个普通输入框，只需要做三件事：
- 在 setup() 中用 ref('') 定义响应式变量，比如 username = ref('')
- 在模板中写
- 用 {{ username }} 实时显示，输入时就能看到内容跟着跳
注意：v-model 会忽略 input 上原有的 value 属性，别再同时写 value="abc" v-model="xxx"，否则 value 会被覆盖。
不同表单类型，绑定逻辑不一样
不是所有元素都按字符串处理，关键看语义：
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
-
textarea：和 input 一样写
v-model="bio"，但不要在标签内写默认文字，否则被清空 -
单选框（radio）：多个 radio 共享同一个 v-model，各自 value 决定选中谁，比如
v-model="gender"+value="male" -
复选框（checkbox）单个：绑定布尔值，
v-model="agree"→ 点一下 true/false 切换 - 复选框多个：v-model 绑定数组，每个选项的 value 被勾选时自动进/出该数组
- 下拉选择（select）：v-model 绑定的是 option 的 value 值，不是 innerText
修饰符让输入更靠谱
加个点号，就能悄悄优化行为，不加也能用，加了更省心：
- .lazy：从“每敲一个字就更新”变成“失焦后才更新”，适合搜索框防抖
-
.number：自动把输入转成数字，避免
"1" + "2" = "12"这种字符串拼接 - .trim：自动去掉首尾空格，对用户名、邮箱等输入很实用
自定义组件也能用 v-model
想封装一个带校验的输入框？子组件要满足两个条件：
- 接收名为 modelValue 的 prop（Vue 3），类型按需设，比如 String 或 Number
- 内部触发 $emit('update:modelValue', newValue) 通知父组件更新
父组件写法完全不变：<my-input v-model="searchText"></my-input>，就像用原生 input 一样自然。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
