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 相关文章推荐
js 数据类型转换总结笔记
Jan 17 Javascript
JS判断当前日期是否大于某个日期的实现代码
Sep 02 Javascript
jquery图片放大镜功能的实例代码
Mar 26 Javascript
js的回调函数详解
Jan 05 Javascript
JavaScript计划任务后台运行的方法
Dec 18 Javascript
JS中使用new Date(str)创建时间对象不兼容firefox和ie的解决方法(两种)
Dec 14 Javascript
javascript获取指定区间范围随机数的方法
Sep 08 Javascript
实例教学如何写vue插件
Nov 30 Javascript
原生js+cookie实现购物车功能的方法分析
Dec 21 Javascript
js删除对象/数组中null、undefined、空对象及空数组方法示例
Nov 14 Javascript
vue+elementUI实现表格关键字筛选高亮
Oct 26 Javascript
js+canvas实现简单扫雷小游戏
Jan 22 Javascript
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
基于mysql的bbs设计(四)
2006/10/09 PHP
php 引用(&amp;)详解
2009/11/20 PHP
关于PHP结束标签的使用细节探讨及联想
2013/03/04 PHP
PHP实现搜索相似图片
2015/09/22 PHP
PHP 实现 JSON 数据的编码和解码操作详解
2020/04/22 PHP
Javascript 类型转换方法
2010/10/24 Javascript
jquery 实现表单验证功能代码(简洁)
2012/07/03 Javascript
jquery分页插件jpaginate在IE中不兼容问题
2014/04/22 Javascript
JS动态增加删除UL节点LI及相关内容示例
2014/05/21 Javascript
Jquery自定义button按钮的几种方法
2014/06/11 Javascript
Enter回车切换输入焦点实现思路与代码兼容各大浏览器
2014/09/01 Javascript
浅谈jquery中delegate()与live()
2015/06/22 Javascript
jquery判断页面网址是否有效的两种方法
2016/12/11 Javascript
vue项目中vue-i18n和element-ui国际化开发实现过程
2018/04/25 Javascript
vue中格式化时间过滤器代码实例
2019/04/17 Javascript
vscode 插件开发 + vue的操作方法
2020/06/05 Javascript
uniapp与webview之间的相互传值的实现
2020/06/29 Javascript
element中table高度自适应的实现
2020/10/21 Javascript
详解Python中的装饰器、闭包和functools的教程
2015/04/02 Python
Python实现读取并保存文件的类
2017/05/11 Python
Python socket套接字实现C/S模式远程命令执行功能案例
2018/07/06 Python
使用Python实现一个栈判断括号是否平衡
2018/08/23 Python
一篇文章弄懂Python中所有数组数据类型
2019/06/23 Python
使用python客户端访问impala的操作方式
2020/03/28 Python
使用keras根据层名称来初始化网络
2020/05/21 Python
Django实现任意文件上传(最简单的方法)
2020/06/03 Python
Selenium关闭INFO:CONSOLE提示的解决
2020/12/07 Python
Foot Locker澳洲官网:美国运动服和鞋类零售商
2019/10/11 全球购物
Ashford台湾:以折扣价提供奢华的男女用表款
2019/12/04 全球购物
Android面试题附答案
2014/12/08 面试题
本科毕业生求职自荐信
2014/02/03 职场文书
怎样写离婚协议书
2015/01/26 职场文书
2016公司新年问候语
2015/11/11 职场文书
Python  lambda匿名函数和三元运算符
2022/04/19 Python
Python实现将多张图片合成MP4视频并加入背景音乐
2022/04/28 Python
JavaScript中reduce()的用法
2022/05/11 Javascript