位置: 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 转载请保留说明!

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

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

  • 发票冲红重开,重开时是按新税率还是旧税率
  • 税收的作用是什么
  • 一次性开票分期确认收入的税务文件是什么
  • 当月的进项当月可以认证吗
  • 会计信息不采集,证书会失效吗
  • 小规模商贸公司没有进项可以开发票吗?
  • 调拨单可以根据哪些单据生成
  • 正版手写
  • 现金日记账划线更正法
  • 预收账款本期发生额怎么算
  • 通讯费可以个人承担吗
  • 上月营业外收入少报入了怎么办
  • 在建工程过程中取得收入怎么入账
  • 职工福利增值税的处理
  • 股票内在价值计算公式中级财务管理
  • 一般纳税人所说的税率是
  • 分配现金股利是什么活动
  • 工程发票需要进项吗
  • 企业所得税减免政策
  • 合营企业之间为什么不构成关联方
  • 金蝶资产减值损失取数计算公式
  • 租赁服务可以享受加计抵减吗
  • 出租房电费怎么结算
  • mac系统怎么删除用户
  • 支付宝付款凭证可以当发票吗
  • 净资产利润比率计算公式
  • 苹果Mac系统怎么切换输入法
  • 苹果系统权限管理在哪找
  • 利用的英文
  • 股权和债权有无区别
  • 单位保洁外包公司收费标准
  • uniapp实战视频教程
  • vue打包vendor文件过大
  • 企业亏损注销税务会不会来查账
  • 含税价怎么计算增值税
  • 若依框架和jeesite
  • php有多简单
  • 为什么运输合同比租赁合同风险小
  • pytorch train()
  • php数组怎么实现的
  • 车间打杂工
  • 公司法人代表能考公务员吗
  • 机动车发票哪几联 做帐
  • 对公账户名称可以是个人名字吗
  • 企业增值税的税收优惠有哪些
  • 美团平台技术部是干什么的
  • mongodb查看数据库大小
  • 存货资产减值损失借贷方向
  • 财务报表申报错误情况说明范文
  • 即征即退收入不能税前扣除
  • 半成品结转成品会计分录
  • 质保金 销售费用
  • 哪些合同不用计提印花税
  • 个人所得税汇算年收入不超过12万
  • 办公室租赁费摊销分录
  • 股东追加投资怎么算
  • 企业营改增税率是多少
  • 公司报销发票需要查验真假吗
  • 折扣怎么写会计分录
  • 超市会计如何核算成本
  • 去年管理费用多支三万元怎么办
  • 普通日记账如何记账
  • 原始凭证的审核要求有哪些
  • sqlserver恢复模式简单和完整
  • 微软桌面 ios
  • 注册表里的默认可以删吗
  • macbookpro移到废纸篓快捷键
  • 手机更新升级版本下载
  • win8开始界面如何设置成win7
  • windows.prompt用法
  • windows10 预览
  • linux中ftp命令的用法
  • android sql语句
  • php和python有什么区别
  • vue实战案例
  • 适用于分析原因的工具有哪些
  • javascript的作用域
  • js基于什么
  • 广东电子税务局电话
  • 印花税票有什么用
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设