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中showModalDialog 的使用解析
Apr 17 Javascript
javascript页面加载完执行事件代码
Feb 11 Javascript
JavaScript面向对象的实现方法小结
Apr 14 Javascript
在html中引入外部js文件,并调用带参函数的方法
Oct 31 Javascript
详解Jquery 遍历数组之$().each方法与$.each()方法介绍
Jan 09 Javascript
js date 格式化
Feb 15 Javascript
详解使用JS如何制作简单的ASCII图与单极图
Mar 31 Javascript
JS利用正则表达式实现简单的密码强弱判断实例
Jun 16 Javascript
vue解决使用webpack打包后keep-alive不生效的方法
Sep 01 Javascript
小程序实现展开/收起的效果示例
Sep 22 Javascript
JavaScript遍历DOM元素的常见方式示例
Feb 16 Javascript
vue界面发送表情的实现代码
Sep 11 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设计模式 Adapter(适配器模式)
2011/06/26 PHP
Php header()函数语法及使用代码
2013/11/04 PHP
利用laravel搭建一个迷你博客实战教程
2017/08/13 PHP
基于ThinkPHP5框架使用QueryList爬取并存入mysql数据库操作示例
2019/05/25 PHP
javascript的parseFloat()方法精度问题探讨
2013/11/26 Javascript
setInterval计时器不准的问题解决方法
2014/05/08 Javascript
jquery实现类似淘宝星星评分功能实例
2014/09/12 Javascript
jQuery设置和移除文本框默认值的方法
2015/03/09 Javascript
jQuery中serializeArray()与serialize()的区别实例分析
2015/12/09 Javascript
浅析JavaScript中的对象类型Object
2016/05/26 Javascript
详解angular2采用自定义指令(Directive)方式加载jquery插件
2017/02/09 Javascript
微信小程序中顶部导航栏的实现代码
2017/03/30 Javascript
Three.js的使用及绘制基础3D图形详解
2017/04/27 Javascript
JS实现颜色的10进制转化成rgba格式的方法
2017/09/04 Javascript
vue实现个人信息查看和密码修改功能
2018/05/06 Javascript
element-ui表格列金额显示两位小数的方法
2018/08/24 Javascript
django使用channels2.x实现实时通讯
2018/11/28 Javascript
手把手带你搭建一个node cli的方法示例
2020/08/07 Javascript
调试Python程序代码的几种方法总结
2015/04/28 Python
Python数据库的连接实现方法与注意事项
2016/02/27 Python
Python搭建Spark分布式集群环境
2019/07/05 Python
将自己的数据集制作成TFRecord格式教程
2020/02/17 Python
KELLER SPORTS荷兰:在线订购最好的运动产品
2020/10/13 全球购物
进修护士自我鉴定
2013/10/14 职场文书
上班离岗检讨书
2014/01/27 职场文书
团委竞选演讲稿
2014/04/24 职场文书
安全生产大检查方案
2014/05/07 职场文书
特教教师先进事迹
2014/05/21 职场文书
抵押贷款承诺书
2014/05/30 职场文书
活动总结范文
2014/08/30 职场文书
团代会闭幕词
2015/01/28 职场文书
2015自愿离婚协议书范本
2015/01/28 职场文书
Python使用UDP实现720p视频传输的操作
2021/04/24 Python
python-for x in range的用法(注意要点、细节)
2021/05/10 Python
python基础入门之普通操作与函数(三)
2021/06/13 Python
python游戏开发Pygame框架
2022/04/22 Python