位置: IT常识 - 正文

v-model的双向数据绑定实现原理(附:案例和项目实例)(v-model的双向绑定原理)

编辑:rootadmin
v-model的双向数据绑定实现原理(附:案例和项目实例) 一. 前言。

推荐整理分享v-model的双向数据绑定实现原理(附:案例和项目实例)(v-model的双向绑定原理),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:v-model双向绑定失效,双向lstm,v-model的双向数据绑定原理,双向lstm,v-model双向数据绑定,v-model双向数据绑定,v-model的双向数据绑定原理,双向lstm,内容如对您有帮助,希望把文章链接给更多的朋友!

相信对使用vue框架的童靴来说,v-model的使用都能信手沾来,熟悉的不能再熟悉,也都知道v-model其实是个语法糖。不过其究竟是怎么实现的双向数据绑定,很大一部分童靴还是心存疑虑。本文就根据最简单的案例和基于实际项目中最常用的实例来从两个角度讲解v-model的前世今生。

二. v-model的前世今生。

目前的几大主流MVC(VM)框架都实现了单向数据绑定。简而言之,vue中的v-model无非就是在单向数据绑定的基础上给对应表单元素(input、select等)添加了(input、change)事件,来动态修改model和view,从而达到双向数据绑定的效果。

三. v-model的实现。类型一:v-model的双向数据绑定实现原理(附:案例和项目实例)(v-model的双向绑定原理)

原生input元素的类型是text/textarea,那么是使用它的value属性和input事件来实现双向数据绑定。

类型二:

原生input元素的类型是radio/checkbox,那么是使用它的checked属性和change事件来实现双向数据绑定。

类型三:

原生select元素,是使用它的value属性和change事件来实现双向数据绑定。

四. v-model的实现案例。

本文就基于input输入框的text类型(上文中的类型一)为基准,来实现双向数据绑定的结果,并和v-mode的效果对比。

核心代码:<input type="text" :value="msg" @input="msg = $event.target.value"/>主要代码:<template> <div class="home"> <div class="box"> v-model的文本框内容:<input type="text" v-model="msg"> <p class="mscbox">v-model的展示内容:{{msg}}</p> </div> <br /> <div class="box2"> 原生文本框的内容:<input type="text" :value="msg2" @input="changeVal"> <p class="mscbox">原生的展示内容:{{msg2}}</p> </div> </div></template><script>export default { name: "Home", components: { }, data(){ return { msg: "v-model的测试内容", msg2: "原生的测试内容", } }, methods: { changeVal(e){ this.msg2 = e.target.value } }};</script><style>.mscbox{ color: red;}</style>效果图:

 五.  根据v-model双向数据绑定实现父子组件的项目实例。实现功能描述:通过父组件的按钮的clink事件和子组件弹窗的关闭事件,实现父子组件弹窗的显示、隐藏无缝交互。主体核心思想:父组件中给子组件标签设置v-model并绑定用于控制子组件显隐的变量。核心代码:父组件:<!--这里使用v-model,相当于是:value="son_obj.show", @input="son_obj.show = $event.target.value"--> <son v-model="son_obj.show"></son>子组件:props: { value:{ type: Boolean, default: false } }, data(){ return { isShow: false, } }, watch:{ value(bool){ this.isShow = bool; } }, methods: { handleClose(){ this.$emit('input',false) } }全部代码:父组件:<template> <div class="parent"> <el-button type="primary" @click="openSon">开启弹窗</el-button> <!--这里使用v-model,相当于是:value="son_obj.show", @input="son_obj.show = $event.target.value"--> <son v-model="son_obj.show"></son> </div></template><script>export default { name: 'parent', components: { son: (resolve) => require(["../components/son.vue"], resolve), }, data(){ return { son_obj: { show: false } } }, methods: { openSon(){ this.son_obj.show = true } }}</script>子组件:<template> <div class="son"> <el-dialog title="提示" :visible.sync="isShow" width="30%" :before-close="handleClose"> <span>这是一段信息</span> <span slot="footer" class="dialog-footer"> <el-button @click="handleClose">取 消</el-button> <el-button type="primary" @click="handleClose">确 定</el-button> </span> </el-dialog> </div></template><script>export default { name: 'son', props: { value:{ type: Boolean, default: false } }, data(){ return { isShow: false, } }, watch:{ value(bool){ this.isShow = bool; } }, methods: { handleClose(){ this.$emit('input',false) } }}</script>效果图:

六. 结语。

以上就是本文的全部内容,通过基础的input案例和父子组件交互案例来诠释了v-model的双向数据绑定实现原理。简而有序,相信能给读者带来清晰明了的知识理解。码字不易,还请各路神仙多多指教。

本文链接地址:https://www.jiuchutong.com/zhishi/295384.html 转载请保留说明!

上一篇:操作系统——死锁(操作系统())

下一篇:面试官问出这几道算法题,你能扛住么?(面试官问几个问题)

  • 如何7步打造核心品牌营销推广方案(核打击流程)

    如何7步打造核心品牌营销推广方案(核打击流程)

  • iphone双击背面截屏(iphone双击背面截屏原理)

    iphone双击背面截屏(iphone双击背面截屏原理)

  • vivox50ufs是多少呢(vivox50是几g)

    vivox50ufs是多少呢(vivox50是几g)

  • 打电话没网络如何解决(打电话没网络如何回事)

    打电话没网络如何解决(打电话没网络如何回事)

  • 怎么让青轴声小点(怎么减小青轴的声音)

    怎么让青轴声小点(怎么减小青轴的声音)

  • 北京苹果手机售后服务政策(北京苹果手机售后维修站崇文门)

    北京苹果手机售后服务政策(北京苹果手机售后维修站崇文门)

  • 微博被拉黑可以发私信吗(微博被拉黑可以@对方吗)

    微博被拉黑可以发私信吗(微博被拉黑可以@对方吗)

  • 探探注销了资料还在吗(探探注销了还能看见资料吗)

    探探注销了资料还在吗(探探注销了还能看见资料吗)

  • 支付宝突然打不开了(支付宝突然打不开网页)

    支付宝突然打不开了(支付宝突然打不开网页)

  • 苹果手机怎么翻译图片中的文字(苹果手机怎么翻转相册照片)

    苹果手机怎么翻译图片中的文字(苹果手机怎么翻转相册照片)

  • 抖音直播本场点赞是什么(抖音直播本场点赞有什么好处)

    抖音直播本场点赞是什么(抖音直播本场点赞有什么好处)

  • 微信长时间不用会被注销吗(微信长时间不用会被收回吗)

    微信长时间不用会被注销吗(微信长时间不用会被收回吗)

  • qq活跃头衔如何升级(qq活跃头衔和等级头衔)

    qq活跃头衔如何升级(qq活跃头衔和等级头衔)

  • siri能识别多个声音吗(siri可以识别几个人)

    siri能识别多个声音吗(siri可以识别几个人)

  • whatsapp时间不准确要怎么弄呢(whatsapp时间不标准)

    whatsapp时间不准确要怎么弄呢(whatsapp时间不标准)

  • 苹果xs长宽是多少cm(苹果xs长宽是多少厘米)

    苹果xs长宽是多少cm(苹果xs长宽是多少厘米)

  • 手机上的sos功能有什么作用(手机的sos功能重要吗)

    手机上的sos功能有什么作用(手机的sos功能重要吗)

  • ps怎么弄(ps怎么弄阴影效果)

    ps怎么弄(ps怎么弄阴影效果)

  • vivo手机密码忘了怎么办(vivo手机密码忘了怎么刷机)

    vivo手机密码忘了怎么办(vivo手机密码忘了怎么刷机)

  • 京东申请退款要确认收货吗(京东申请退款要多久才能审核成功)

    京东申请退款要确认收货吗(京东申请退款要多久才能审核成功)

  • 手机截图删了怎么恢复(手机截图删了怎么找回来)

    手机截图删了怎么恢复(手机截图删了怎么找回来)

  • 苹果无线耳机怎么充电(苹果无线耳机怎么充电是正确的)

    苹果无线耳机怎么充电(苹果无线耳机怎么充电是正确的)

  • 抖音注销了还能重新注册吗(抖音注销了还能恢复原来的视频)

    抖音注销了还能重新注册吗(抖音注销了还能恢复原来的视频)

  • 陌陌录屏怎么没有了(陌陌录屏怎么没有声音)

    陌陌录屏怎么没有了(陌陌录屏怎么没有声音)

  • 陌陌语音通话怎么没有了(陌陌如何语音通话聊天)

    陌陌语音通话怎么没有了(陌陌如何语音通话聊天)

  • window10锁屏设置密码(window10锁屏界面怎么设置)

    window10锁屏设置密码(window10锁屏界面怎么设置)

  • 所得税税前扣除凭证管理办法
  • 小规模房地产企业税收优惠政策
  • 公司收到借款利息收入要交增值税吗
  • 专票没有抵扣联可以作废吗
  • 信息技术服务费入什么科目
  • 交通补贴算工资收入吗
  • 预缴税款什么时候可以手动填写申报表
  • 现金股利什么时候发放
  • 库存商品进价成本
  • 收到捐赠设备
  • 企业支付给生产车间
  • 业务招待费扣除比例
  • 半成品转成品会计分录
  • 托收承付是收到钱了吗
  • 股东放弃本企业股权
  • 专项资金怎么入账
  • 简并税率后,申报增值税要注意哪几点?
  • 3万免税是指什么
  • 捐赠货品怎么做会计分录
  • 临时使用自建商品房是否需要缴纳房产税?
  • 1697510024
  • 房地产企业土地出让金抵减销项税额
  • 支付水电费如何记账
  • 工商年报股东变更申请
  • win10更新windows
  • 预计应收账款余额
  • 商品房买卖合同备案查询
  • 中秋福利发放现金文案怎么写
  • windows 11截图
  • php日期时间函数
  • 公司资产转让要交多少税
  • 票据行为包括哪4点
  • 卖机械配件平台有哪些
  • paul滑雪
  • 应付职工薪酬负数风险
  • 前端 原生
  • yolo算法python代码
  • php动态生成网页
  • js 字符串 中 字符位置
  • 哪些计入其他收益与营业外收入
  • 发票查询密码区空白怎么回事
  • 核定征收的收入
  • css代码基础
  • 应收款需要平行公司吗
  • 企业年金举例说明
  • 表单数据提交时会触发什么事件
  • 费用暂估入账后期如何冲销
  • 建筑安装业,指从事____的企业
  • 企业每月营业额达多少需要交税
  • 企业利润分配应当遵循的原则
  • 农产品加计扣除怎么计算
  • 购入工程物资支付的增值税应计入
  • 去年的会计凭证做错了,今年发现要怎么修改
  • 会计分录要怎么写
  • 车辆折旧费法律支持吗
  • 生产成本如何设置明细账
  • mysql查询语句中的逻辑运算符
  • 腾讯云centos7有界面吗
  • fedora系统怎么设置停电关机
  • windowsxp无法定位程序输入点
  • window service2008r2激活
  • Windows Server 2008脱机文件配置攻略
  • ubuntu系统安装教程
  • vmware虚拟机Linux扩展硬盘
  • win7电脑启动
  • window10光驱不能用了
  • python 多线程调用
  • unity碰撞抖动怎么解决
  • 已经序列化的表单怎么再添加
  • jquery validation
  • 在dos下运行
  • asp.net 4.8
  • python脚本怎么编写
  • Android自定义控件开发入门与实战 百度网盘
  • android反编译软件
  • javascript面向对象编程指南第三版
  • 湖南国家税务局网上电子税务局官网
  • 生产变压器设备
  • 地方税收包含哪些
  • 企业的财务是什么
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设