vue watch深度监听对象实现数据联动效果


Posted in Javascript onAugust 16, 2018

vue watch深度监听对象实现数据联动效果

当对象内的某一个元素发生变化,判断对象另一元素,并进行赋值

<template>
<input type="text" v-model="a.a1.a12"/>{{a.a1.a12}}

<input type="text" v-model="a.a2.a22"/>{{a.a2.a22}}
</template>
<script>

data(){


retrun{



a:{




a1:{





a12:12




},




a2:{





a22:15




}



}

},

watch:{


a:{



handler(val.oldval){




if(val.a1.a12<val.a2.a22){





val.a2.a22=val.a1.a12;




}



},



deep:true


}

}
</script>

总结

以上所述是小编给大家介绍的vue watch深度监听对象实现数据联动效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript静态的动态
Sep 18 Javascript
HTML,CSS,JavaScript速查表推荐
Dec 02 Javascript
jQuery实现的背景动态变化导航菜单效果
Aug 24 Javascript
jQuery热气球动画半透明背景的后台登录界面代码分享
Aug 28 Javascript
JS HTML5拖拽上传图片预览
Jul 18 Javascript
微信小程序 wx.request(object) API详解及实例代码
Sep 30 Javascript
Angular2入门--架构总览
Mar 29 Javascript
微信小程序开发入门基础教程
Apr 19 Javascript
jQuery滑动到底部加载下一页数据的实例代码
May 22 jQuery
react 兄弟组件如何调用对方的方法示例
Oct 23 Javascript
ES6如何用一句代码实现函数的柯里化
Jan 18 Javascript
ajax jquery实现页面某一个div的刷新效果
Mar 04 jQuery
JS实现的RC4加密算法示例
Aug 16 #Javascript
vue2.0父子组件间传递数据的方法
Aug 16 #Javascript
Vue2.0中三种常用传值方式(父传子、子传父、非父子组件传值)
Aug 16 #Javascript
bootstrap实现点击删除按钮弹出确认框的实例代码
Aug 16 #Javascript
浅谈Vue.js路由管理器 Vue Router
Aug 16 #Javascript
layui问题之模拟select点击事件的实例讲解
Aug 15 #Javascript
深入理解Vue router的部分高级用法
Aug 15 #Javascript
You might like
discuz Passport 通行证 整合笔记
2008/06/30 PHP
php版微信公众号接口实现发红包的方法
2016/10/14 PHP
PHP+redis实现微博的推模型案例分析
2019/07/10 PHP
Javascript中定义方法的另类写法(批量定义js对象的方法)
2011/02/25 Javascript
jquery中dom操作和事件的实例学习 仿yahoo邮箱登录框的提示效果
2011/11/30 Javascript
jquery实现每个数字上都带进度条的幻灯片
2013/02/20 Javascript
js模拟C#中List的简单实例
2014/03/06 Javascript
javascript 实现 原路返回
2015/01/21 Javascript
浅谈JavaScript数据类型
2015/03/03 Javascript
在Mac OS下使用Node.js的简单教程
2015/06/24 Javascript
使用jQuery在移动页面上添加按钮和给按钮添加图标
2015/12/04 Javascript
javascript每日必学之循环
2016/02/19 Javascript
详细探究ES6之Proxy代理
2016/07/22 Javascript
js数组去重的hash方法
2016/12/22 Javascript
JS中setTimeout和setInterval的最大延时值详解
2017/02/13 Javascript
angularjs实现猜大小功能
2017/10/23 Javascript
Vue infinite update loop的问题解决
2019/04/23 Javascript
layui form表单提交之后重新加载数据表格的方法
2019/09/11 Javascript
举例讲解Python中的list列表数据结构用法
2016/03/12 Python
python中将字典形式的数据循环插入Excel
2018/01/16 Python
对Python3之进程池与回调函数的实例详解
2019/01/22 Python
Django用户认证系统 User对象解析
2019/08/02 Python
Python 寻找局部最高点的实现
2019/12/05 Python
Python如何输出整数
2020/06/07 Python
一文轻松掌握python语言命名规范规则
2020/06/18 Python
CSS3 创建网页动画实现弹跳球动效果
2018/10/30 HTML / CSS
微软俄罗斯官方网站:Microsoft俄罗斯
2016/09/18 全球购物
中东地区最大的奢侈品市场:The Luxury Closet
2019/04/09 全球购物
造价工程师个人求职信
2013/09/21 职场文书
开工仪式策划方案
2014/05/23 职场文书
培训督导岗位职责
2015/04/10 职场文书
职场领导同事生日简短祝福语
2019/08/06 职场文书
浅谈Python响应式类库RxPy
2021/06/14 Python
MySQL约束超详解
2021/09/04 MySQL
JavaScript小技巧带你提升你的代码技能
2021/09/15 Javascript
解决Mysql中的innoDB幻读问题
2022/04/29 MySQL