421 字
2 分钟
Vue指令-v-model
AI 摘要
Vue指令-v-model
定义
v-model指令用于在表单元素上实现双向数据绑定。它可以方便地获取或设置表单项数据，实现Vue数据与表单输入之间的自动同步。
语法/用法
基本用法
<!-- 文本输入框 --><input type="text" v-model="username">
<!-- 下拉选择框 --><select v-model="selected"> <option value="A">选项A</option> <option value="B">选项B</option></select>
<!-- 多选框 --><input type="checkbox" v-model="checked">
<!-- 单选框 --><input type="radio" v-model="picked" value="a">表单数据绑定
<form class="search-form"> <input type="text" v-model="searchEmp.name" placeholder="姓名" /> <select v-model="searchEmp.gender"> <option value="">性别</option> <option value="1">男</option> <option value="2">女</option> </select></form>常见场景
- 表单输入：文本输入、密码输入、文本域
- 选择控件：下拉选择、单选框、多选框
- 搜索功能：搜索框与搜索条件的双向绑定
- 数据收集：用户注册、信息填写等表单场景
- 实时过滤：输入框内容实时过滤列表数据
注意事项
-
数据源要求：
v-model绑定的变量必须在data()中定义- 变量可以是基本类型或对象属性
-
双向绑定原理：
- Vue数据变化 → 视图更新
- 视图输入变化 → Vue数据更新
- 本质是
v-bind和v-on的语法糖
-
修饰符：
.lazy：在change事件后同步数据.number：将输入转为数字类型.trim：自动过滤首尾空白字符
-
自定义组件：
- 在自定义组件上使用
v-model需要特殊处理 - 需要组件内部实现
modelValue和update:modelValue
- 在自定义组件上使用
-
与原生表单区别：
- 不需要手动获取表单值
- 数据变化自动同步到视图
- 支持多种表单元素类型
相关链接
支持与分享
如果这篇文章对你有帮助，欢迎分享给更多人或赞助支持！
最后更新于 2026-05-15，距今已过 36 天
部分内容可能已过时
评论区
[ 标签 ]
[ 分类 ]
[ 公告 ]
如果你喜欢，那么欢迎来到我的世界！
了解更多[ 音乐 ]
音乐
暂未播放
0:00 0:00
找不到相关结果。
[ contents ]
[ 全部文章 ]
