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 遍历验证所有文本框的值
Aug 27 Javascript
jQuery技巧总结
Jan 01 Javascript
防止xss和sql注入:JS特殊字符过滤正则
Apr 18 Javascript
js创建一个input数组并绑定click事件的方法
Jun 12 Javascript
js实现简单div拖拽功能实例
May 12 Javascript
很棒的vue弹窗组件
May 24 Javascript
jQuery.form.js的使用详解
Jun 14 jQuery
Vue异步组件处理路由组件加载状态的解决方案
Sep 07 Javascript
详解Nuxt内导航栏的两种实现方式
Apr 16 Javascript
如何使用Javascript中的this关键字
May 28 Javascript
通过实例解析json与jsonp原理及使用方法
Sep 27 Javascript
在vue中通过render函数给子组件设置ref操作
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
php实现window平台的checkdnsrr函数
2015/05/27 PHP
yii2中LinkPager增加总页数和总记录数的实例
2017/08/28 PHP
php封装的page分页类完整实例代码
2020/02/01 PHP
Js 刷新框架页的代码
2010/04/13 Javascript
js调用后台、后台调用前台等方法总结
2014/04/17 Javascript
Jquery网页内滑动缓冲导航的实现代码
2015/04/05 Javascript
js数组去重的5种算法实现
2015/11/04 Javascript
jquery正则表达式验证(手机号、身份证号、中文名称)
2015/12/31 Javascript
js仿支付宝填写支付密码效果实现多方框输入密码
2016/03/09 Javascript
浅谈jquery的map()和each()方法
2016/06/12 Javascript
js 连续赋值的简单实现
2016/06/13 Javascript
javascript中对象的定义、使用以及对象和原型链操作小结
2016/12/14 Javascript
Javascript中数组去重与拍平的方法示例
2017/02/03 Javascript
javascript设计模式之单体模式学习笔记
2017/02/15 Javascript
Node.js环境下Koa2添加travis ci持续集成工具的方法
2017/06/19 Javascript
vuex学习之Actions的用法详解
2017/08/29 Javascript
Vue动态获取width的方法
2018/08/22 Javascript
微信小程序视图容器(swiper)组件创建轮播图
2020/06/19 Javascript
python获取多线程及子线程的返回值
2017/11/15 Python
python中(str,list,tuple)基础知识汇总
2018/02/20 Python
tensorflow构建BP神经网络的方法
2018/03/12 Python
python3+selenium自动化测试框架详解
2019/03/17 Python
Python3安装Pillow与PIL的方法
2019/04/03 Python
详解如何用python实现一个简单下载器的服务端和客户端
2019/10/28 Python
Python接口开发实现步骤详解
2020/04/26 Python
基于python实现破解滑动验证码过程解析
2020/05/28 Python
conda安装tensorflow和conda常用命令小结
2021/02/20 Python
前后端结合实现amazeUI分页效果
2020/08/21 HTML / CSS
出纳员岗位职责
2014/03/13 职场文书
干部作风建设工作总结
2014/10/29 职场文书
团员个人总结
2015/02/26 职场文书
Golang 编译成DLL文件的操作
2021/05/06 Golang
MATLAB 全景图切割及盒图显示的实现步骤
2021/05/14 Python
pycharm安装深度学习pytorch的d2l包失败问题解决
2022/03/25 Python
Django + Taro 前后端分离项目实现企业微信登录功能
2022/04/07 Python
win10电脑关机快捷键是哪个 win10快速关机的几种方法
2022/08/14 数码科技