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

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

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

  • 流转税具体的账务处理,可以怎样考虑?
  • 会计凭证销毁方法
  • 租赁房屋怎么写合同
  • 个体户也要做实收资本吗
  • 公司没有账目违法吗
  • 个人独资企业是有限责任还是无限责任
  • 权益工具是金融资产还是所有者权益
  • 员工回家探亲的文案
  • 公司提供住宿员工在外居住出现问题
  • 汇算清缴常见问题
  • 技术类服务行业用不用开外经证
  • 发货就要开票吗是真的吗
  • 一般纳税人加计抵减申报表怎么填
  • 单位补缴社保会罚款吗
  • 开具正数发票中如何体现扣款
  • 办公场所转租赁需要交哪些税费
  • 外购商品计入
  • 外商投资企业退出条件
  • 所有的企业都能采用免费策略
  • 可供出售金融资产和长期股权投资
  • 预收账款与预付账款均属于负债
  • 待抵扣进项税额是什么情况下用的
  • 关注!这两种情况下可免征增值税!
  • 国有划拨地是否能转让土地
  • 固定成本与变动成本的区别
  • 发票代码会有一样的吗
  • 无偿划转房产能否入递延收益
  • 治理层和管理层包括哪些
  • 删掉广告有什么办法
  • 房地产企业销售无产权车位
  • 股票涨幅公式怎么写
  • php模式
  • 差额征收是啥意思
  • php yii框架
  • php get函数
  • 投资收益怎么做不影响利润
  • 进口的应税消费品,于报关进口时缴纳消费税
  • php解压压缩包
  • vue手机端
  • 生产车间人员招聘要求
  • 工业企业如何纳税
  • 在数组指定位置添加数据
  • fall 瀑布
  • php中array怎么用
  • jetbrainsnews
  • 银行流水要去哪里打
  • 固定资产处置怎么计算
  • mongodb document
  • sql无法运行
  • 房产税城镇土地使用税申报期限
  • 春节重要通知发放工资
  • 在建工程发生的运费计入什么科目
  • 无形资产减值准备
  • 建筑服务的税率是
  • 企业收到补贴资金怎么办
  • 城镇土地使用税减免税政策
  • 教育行业的成本怎么做账
  • 财务报表是否合法公允
  • 盈余公积什么时候会出现在账面
  • 固定资产如何分类?
  • mysql外键怎么写
  • navicat查询结果下面输出栏如何关闭
  • 注册表已被管理员禁用怎么处理
  • 解析包错误怎么解除
  • windows7怎么说
  • centos启动卡在了启动界面
  • linux wc命令如何实现
  • win8系统怎样
  • linux在网络方面的应用
  • js怎么理解
  • android 快速开发
  • Eclipse开发工具安装
  • jquery滚动条滚动到指定位置
  • 怎么改jdk路径
  • 批处理命令在windows操作中的典型应用
  • cmd切换到当前目录
  • Android studio 打包apk后卡在首屏
  • 云南省国家税务局APP
  • 云南国税通用发票查询
  • 电子发票冲红期限
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设