当前位置: 首页 > 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.hskmm.com/?act=detail&tid=32548

相关文章:

  • 防塔游戏单机 王国保卫战全集下载 1~5部全系列MOD DLC修改版 安卓+ios+PC电脑版
  • 德州东站换乘攻略(仅供参考)
  • 第十六篇
  • Date 2025.10.6
  • 实验作业2
  • macOS 双开/多开微信WeChat完整教程(支持 4.X 及以上版本) - 实践
  • 快捷运用电脑的方式(不使用鼠标)
  • 2025.10.16总结 - A
  • 初识pytorch:更新网络参数的反向传播、损失函数和优化器
  • Composition API 与 React Hook 很像,区别是什么?
  • 题解:CF1483E Vabank
  • 20251016 正睿二十连测
  • [贝佐斯-六页纸]
  • cc
  • 感知节点@7@ ESP32+arduino+ 第五个程序FreeRTOS 上 增加一个新任务ADC任务
  • 2025年10月切削液厂家 TOP 企业品牌推荐排行榜,全合成切削液,半合成切削液,微乳切削液推荐这十家公司!
  • 普源精电RIGOL DS2202A示波器保存波形到CSV文件过慢解决方法:保存为WFM格式、通过LAN接口使用SCPI+PyVISA控制
  • 动手学深度学习——引言
  • CF1989E Distance to Different
  • AngularJS:构建更智能的Web应用框架
  • 给档案装上“智慧大脑”:文档抽取技术的四大赋能场景
  • P11816QOJ1250 Pionki 轮廓线DP
  • linux系统scatter/gather I/O技术
  • PostgreSQL 为什么不选择 B+ 树索引? - Lafite
  • Joeys shell
  • Redis 集群从部署到可视化管理全流程(超详细实战指南)
  • 什么是BPM流程自动化?从“财务报销”入手,一文读懂企业效率引擎
  • 软件工程学习日志2025.10.16
  • P1072 [NOIP 2009 提高组] Hankson 的趣味题
  • 25w41a快照测评:鹦鹉螺成精了?长矛教你戳穿末影人!