当前位置: 首页 > news >正文

v-model 的实现原理

vue 中 v-model 可以实现数据的双向绑定,但是为什么这个指令就可以实现数据的双向绑定呢?
其实 v-model 是 vue 的一个语法糖。即利用 v-model 绑定数据后,既绑定了数据,又添加了一个 input 事件监听。
实现原理:

  • v-bind绑定响应数据;
  • 触发input事件并传递数据。
点击查看代码
<input v-model="text"></input>
// 等价于:
<input :value="text" @input="text = $event.target.value"></input>
// 组件中使用:
<custom-input :value="text" @input="$event"></custom-input>
// 根据v-model原理模拟:
<input type="text" id="ipt1">
<input type="text" id="ipt2">
<script>var ipt1=document.getElementById('ipt1');var ipt2=document.getElementById('ipt2');ipt1.addEventListener("input",function(){ipt2.value=ipt1.value;})
</script>
http://www.zskr.cn/news/22500.html

相关文章:

  • 详细介绍:【译】Visual Studio 中针对 .NET MAUI 的 XAML 实时预览功能的增强
  • docker镜像层和容器层
  • 2025.10.16总结 - A
  • 20251016 正睿二十连测
  • [贝佐斯-六页纸]
  • 感知节点@7@ ESP32+arduino+ 第五个程序FreeRTOS 上 增加一个新任务ADC任务
  • 2025年10月切削液厂家 TOP 企业品牌推荐排行榜,全合成切削液,半合成切削液,微乳切削液推荐这十家公司!
  • 详细介绍:学习:uniapp全栈微信小程序vue3后台(29)
  • lianxi
  • Zookeeper 技术详细介绍 - 指南
  • PostgreSQL 为什么不选择 B+ 树索引? - Lafite
  • Redis 集群从部署到可视化管理全流程(超详细实战指南)
  • P1072 [NOIP 2009 提高组] Hankson 的趣味题
  • Meta推出Agent Learning via Early Experience,推动语言代理自主学习新范式
  • fiddlerscriptCustomize Menus - 特洛伊
  • Fiddler And LINQ - 特洛伊
  • 动态加速中优化失败路径反馈的方法
  • 铜价冲击下,如何“锁住”母排利润?
  • 10.16读书报告
  • 元推理:哥德尔搞不完定理,翻来覆去的搞。。。。
  • PostgreSQL社区CUUG 院校行 - 内蒙古农业大学计算机与信息工程学院
  • 2025年铝复合板厂家综合实力排行榜TOP10:一站式服务成行业新趋势
  • 2025年市面上桥架品牌排行榜前十强权威解析
  • 2025年桥架品牌综合实力排行榜:十大优质供应商权威评测
  • 2025 年注浆管生产厂家最新推荐榜:聚焦密封性能,精选优质企业助力工程采购决策岩心管/钢花管/管棚管/注浆管小导管厂家推荐
  • Nx项目中利用Vitest对原生JS组件进行单元测试
  • 2025年10月16日权威信息公布:西安买房必看新楼盘口碑排行榜TOP10权威发布
  • 2025-CodeStar十一综合评估CSP-S
  • JavaScriptDay3
  • 2025 年标识标牌制造厂家最新推荐排行榜:解读行业头部企业产能与技术实力,精选优质品牌供订做参考