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实现的仿Flash广告图片轮换效果
Apr 24 Javascript
你的 mixin 真的兼容 ECMAScript 5 吗?
Apr 11 Javascript
排序算法的javascript实现与讲解(99js手记)
Sep 28 Javascript
jQuery实现动画效果circle实例
Aug 06 Javascript
jquery实现可自动判断位置的弹出层效果代码
Oct 12 Javascript
jQuery实现右下角可缩放大小的层完整实例
Jun 20 Javascript
微信支付 JS API支付接口详解
Jul 11 Javascript
浅谈javascript alert和confirm的美化
Dec 15 Javascript
layer弹出层倒计时关闭的实现方法
Sep 27 Javascript
微信小程序本地存储实现每日签到、连续签到功能
Oct 09 Javascript
jquery将信息遍历到界面上实例代码
Jan 21 jQuery
vue中echarts的用法及与elementui-select的协同绑定操作
Nov 17 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
dedecms后台验证码总提示错误的解决方法
2007/03/21 PHP
Laravel学习教程之View模块详解
2017/09/18 PHP
php使用fputcsv实现大数据的导出操作详解
2020/02/27 PHP
Javascript 事件流和事件绑定
2009/07/16 Javascript
EXTJS内使用ACTIVEX控件引起崩溃问题的解决方法
2010/03/31 Javascript
jqplot通过ajax动态画折线图的方法及思路
2013/12/08 Javascript
jQuery:delegate中select()不起作用的解决方法(实例讲解)
2014/01/26 Javascript
jquery预加载图片的方法
2015/05/27 Javascript
基于MVC+EasyUI的web开发框架之使用云打印控件C-Lodop打印页面或套打报关运单信息
2016/08/29 Javascript
Nodejs之TCP服务端与客户端聊天程序详解
2017/07/07 NodeJs
vue 组件的封装之基于axios的ajax请求方法
2018/08/11 Javascript
如何为你的JS项目添加智能提示与类型检查详解
2019/03/12 Javascript
js array数组对象操作方法汇总
2019/03/18 Javascript
用Vue编写抽象组件的方法
2019/05/06 Javascript
小程序卡片切换效果组件wxCardSwiper的实现
2020/02/13 Javascript
JavaScript, select标签元素左右移动功能实现
2020/05/14 Javascript
Javascript前端下载后台传来的文件流代码实例
2020/08/18 Javascript
[04:32]玩具屠夫中文语音节选
2020/08/23 DOTA
使用Python中的cookielib模拟登录网站
2015/04/09 Python
python-str,list,set间的转换实例
2018/06/27 Python
Windows 安装 Anaconda3+PyCharm的方法步骤
2019/06/13 Python
解决Django连接db遇到的问题
2019/08/29 Python
Jupyter Notebook输出矢量图实例
2020/04/14 Python
matplotlib基础绘图命令之bar的使用方法
2020/08/13 Python
shell程序如何生命变量?shell变量是弱变量吗?
2014/11/10 面试题
信息管理专业推荐信
2013/10/29 职场文书
英语专业毕业生自荐信范文
2013/12/31 职场文书
学习十八大坚定理想信念心得体会
2014/03/11 职场文书
成立公司计划书
2014/05/07 职场文书
办公室年度工作总结2015
2015/05/21 职场文书
工伤劳动仲裁代理词
2015/05/25 职场文书
解析Java中的static关键字
2021/06/14 Java/Android
Redis 的查询很快的原因解析及Redis 如何保证查询的高效
2022/03/16 Redis
JS轻量级函数式编程实现XDM三
2022/06/16 Javascript
git stash(储藏)的用法总结
2022/06/25 Servers
Docker部署Mysql8的实现步骤
2022/07/07 Servers