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学习7 操作JavaScript对象和集合的函数
Feb 07 Javascript
JS.elementGetStyle(element, style)应用示例
Sep 24 Javascript
jquery修改属性值实例代码(设置属性值)
Jan 06 Javascript
javascript中获取class的简单实现
Jul 12 Javascript
老生常谈JavaScript中的this关键字
Oct 01 Javascript
js中获取键盘事件的简单实现方法
Oct 10 Javascript
javascript 秒表计时器实现代码
Mar 09 Javascript
jQuery动画_动力节点节点Java学院整理
Jul 04 jQuery
JavaScript事件冒泡与事件捕获实例分析
Aug 01 Javascript
JS中的两种数据类型及实现引用类型的深拷贝的方法
Aug 12 Javascript
wepy--用vantUI 实现上弹列表并选择相应的值操作
Nov 03 Javascript
浅谈TypeScript 索引签名的理解
Oct 16 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
php中的比较运算符详解
2013/10/28 PHP
在win系统安装配置 Memcached for PHP 5.3 图文教程
2015/03/03 PHP
apache和PHP如何整合在一起
2015/10/12 PHP
PHP与Ajax相结合实现登录验证小Demo
2016/03/16 PHP
PHP入门教程之使用Mysqli操作数据库的方法(连接,查询,事务回滚等)
2016/09/11 PHP
THREE.JS入门教程(5)你应当知道的十件事
2013/01/24 Javascript
JS之Date对象和获取系统当前时间详解
2014/01/13 Javascript
js浏览器本地存储store.js介绍及应用
2014/05/13 Javascript
Javascript动态引用CSS文件的2种方法介绍
2014/06/06 Javascript
JavaScript访问CSS属性的几种方式介绍
2014/07/21 Javascript
Javascript函数式编程语言
2015/10/11 Javascript
AngularJS基础 ng-src 指令简单示例
2016/08/03 Javascript
vue组件间通信解析
2017/03/01 Javascript
jQuery输入框密码的显示隐藏【代码分享】
2017/04/29 jQuery
xmlplus组件设计系列之选项卡(Tabbar)(5)
2017/05/03 Javascript
Vue中img的src属性绑定与static文件夹实例
2017/05/18 Javascript
JavaScript脚本语言是什么_动力节点Java学院整理
2017/06/26 Javascript
Angular.js实现获取验证码倒计时60秒按钮的简单方法
2017/10/18 Javascript
Vue Promise的axios请求封装详解
2018/08/13 Javascript
vue 使用vue-i18n做全局中英文切换的方法
2018/10/29 Javascript
原生JS实现的自动轮播图功能详解
2018/12/28 Javascript
简单说说如何使用vue-router插件的方法
2019/04/08 Javascript
TypeScript中使用getElementXXX()的示例代码
2019/09/12 Javascript
[01:09:16]DOTA2-DPC中国联赛 正赛 SAG vs Dynasty BO3 第一场 1月25日
2021/03/11 DOTA
一则python3的简单爬虫代码
2014/05/26 Python
sublime text 3配置使用python操作方法
2017/06/11 Python
Python基于回溯法子集树模板解决最佳作业调度问题示例
2017/09/08 Python
nginx搭建基于python的web环境的实现步骤
2020/01/03 Python
Python request使用方法及问题总结
2020/04/26 Python
利用CSS3的线性渐变linear-gradient制作边框的示例
2016/06/02 HTML / CSS
波兰最大的电商平台:Allegro.pl
2021/02/06 全球购物
捐款倡议书怎么写
2014/05/13 职场文书
不听老师话的万能检讨书
2014/10/04 职场文书
大雁塔英文导游词
2015/02/10 职场文书
2015公司年度工作总结
2015/05/14 职场文书
导游词之广东佛山(南风古灶)
2019/09/24 职场文书