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 相关文章推荐
jQuery实现3D文字特效的方法
Mar 10 Javascript
jquery实现的Accordion折叠面板效果代码
Sep 02 Javascript
jquery实现右侧栏菜单选择操作
Mar 04 Javascript
jquery easyui dataGrid动态改变排序字段名的方法
Mar 02 Javascript
Vue中fragment.js使用方法详解
Mar 09 Javascript
微信小程序开发之好友列表字母列表跳转对应位置
Sep 26 Javascript
浅谈Webpack自动化构建实践指南
Dec 18 Javascript
Javascript防止图片拉伸的自适应处理方法
Dec 26 Javascript
dts文件中删除一个node或属性的操作方法
Aug 05 Javascript
JS实现扫码枪扫描二维码功能
Jan 03 Javascript
vue实现两个组件之间数据共享和修改操作
Nov 12 Javascript
vue3自定义dialog、modal组件的方法
Jan 04 Vue.js
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
PHP新手上路(十四)
2006/10/09 PHP
php+ajax实现文章自动保存的方法
2014/12/30 PHP
ThinkPHP框架实现的邮箱激活功能示例
2018/06/15 PHP
laravel5实现微信第三方登录功能
2018/12/06 PHP
给moz-firefox下添加IE方法和属性
2007/04/10 Javascript
把字符串按照特定的字母顺序进行排序的js代码
2014/01/28 Javascript
jquery中get,post和ajax方法的使用小结
2014/02/04 Javascript
JS数组(Array)处理函数整理
2014/12/07 Javascript
简介JavaScript中的italics()方法的使用
2015/06/08 Javascript
javascript中不易分清的slice,splice和split三个函数
2016/03/29 Javascript
JS提示:Uncaught SyntaxError:Unexpected token ) 错误的解决方法
2016/08/19 Javascript
JS访问DOM节点方法详解
2016/11/29 Javascript
JavaScript中的 attribute 和 jQuery中的 attr 方法浅析
2017/01/04 Javascript
详解在Vue中通过自定义指令获取dom元素
2017/03/04 Javascript
Vue2.0组件间数据传递示例
2017/03/07 Javascript
浅谈Angular4实现热加载开发旅程
2017/09/08 Javascript
Vue2 监听属性改变watch的实例代码
2018/08/27 Javascript
浅谈Vue.js中如何实现自定义下拉菜单指令
2019/01/06 Javascript
关于React动态加载路由处理的相关问题
2019/01/07 Javascript
JS中使用react-tooltip插件实现鼠标悬浮显示框
2019/05/15 Javascript
jquery实现Ajax请求的几种常见方式总结
2019/05/28 jQuery
NodeJS http模块用法示例【创建web服务器/客户端】
2019/11/05 NodeJs
[03:01]2014DOTA2国际邀请赛 DC:我是核弹粉,为Burning和国土祝福
2014/07/13 DOTA
Python中动态创建类实例的方法
2017/03/24 Python
利用Python如何批量更新服务器文件
2018/07/29 Python
Python循环结构的应用场景详解
2019/07/11 Python
python的faker库用法
2019/11/28 Python
如何使用Python多线程测试并发漏洞
2019/12/18 Python
15行Python代码实现免费发送手机短信推送消息功能
2020/02/27 Python
Java的基础面试题附答案
2016/01/10 面试题
JSP和EJB可以共享HttpSession么?EJB里面可以改变session里面的内容
2013/06/05 面试题
加拿大探亲邀请信
2014/01/28 职场文书
生日礼品店创业计划书范文
2014/03/21 职场文书
2014年个人工作总结报告
2014/11/27 职场文书
文明单位汇报材料
2014/12/24 职场文书
cf战队宣传语
2015/07/13 职场文书