Vue v-model 双向数据绑定
260 字
1 分钟
Vue v-model 双向数据绑定
v-model 在 Vue 中的作用
v-model 是 Vue 提供的双向数据绑定指令，用于在表单控件（如 input、textarea、select）和组件之间同步数据。
特点：
- 绑定的数据会随着用户输入自动更新。
- 适用于
input、textarea、select等表单控件。 - Vue 3 中可以自定义
v-model绑定的属性。
本质是语法糖
在原生表单元素上，v-model 约等于「value 绑定 + input 事件回写」：
<input v-model="text" />
<!-- 等价于 --><input :value="text" @input="text = $event.target.value" />修饰符
<!-- lazy：改为 change 事件触发（失焦才同步） --><input v-model.lazy="text" />
<!-- trim：自动去掉首尾空格 --><input v-model.trim="text" />
<!-- number：把输入转为数字 --><input v-model.number="age" type="number" />在组件上使用（Vue 3）
组件上的 v-model 默认展开为 modelValue prop 和 update:modelValue 事件：
<!-- 父组件 --><MyInput v-model="keyword" />
<!-- 等价于 --><MyInput :model-value="keyword" @update:model-value="keyword = $event" />// 子组件 MyInputconst props = defineProps(["modelValue"]);const emit = defineEmits(["update:modelValue"]);Vue 3 还支持多个双向绑定，通过参数区分：
<MyForm v-model:title="bookTitle" v-model:author="bookAuthor" />自定义组件也可以声明 v-model 的 arg、事件名与修饰符（defineModel() 更简洁）。
文章分享
如果这篇文章对你有帮助，欢迎分享给更多人！
相关文章智能推荐
1
Vue v-bind 动态属性绑定
前端开发v-bind 将 JavaScript 表达式绑定到 HTML attribute 的用法。
2
Vue 生命周期钩子
前端开发Vue 组件创建、挂载、更新各阶段的生命周期钩子与可操作范围对照。
3
Vue 组件属性 Props
前端开发Props 父子传值的基础用法、类型校验、默认值与必填约束。
4
Grafana 可视化与监控
云原生与运维Grafana 的定位、常见数据源与 Grafana + Prometheus 经典监控链路。
5
微服务之间如何传递 trace
后端开发跨服务传递的是 trace 上下文而非 tracer：HTTP header、gRPC metadata 与 MQ 消息头的标准做法。
随机文章随机推荐