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实现仿银行密码输入框效果的代码
Dec 13 Javascript
setAttribute 与 class冲突解决
Feb 17 Javascript
jquery垂直公告滚动实现代码
Dec 08 Javascript
javascript中声明函数的方法及调用函数的返回值
Jul 22 Javascript
JavaScript中使用arguments获得函数传参个数实例
Aug 27 Javascript
Perl Substr()函数及函数的应用
Dec 16 Javascript
JS数组合并push与concat区别分析
Dec 17 Javascript
jquery对象与DOM对象转化
Feb 08 Javascript
Vue实现typeahead组件功能(非常靠谱)
Aug 26 Javascript
jquery如何实现点击空白处隐藏元素
Dec 05 jQuery
JavaScript canvas绘制圆弧与圆形
Feb 18 Javascript
element-ui树形控件后台返回的数据+生成组织树的工具类
Mar 05 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
不用GD库生成当前时间的PNG格式图象的程序
2006/10/09 PHP
PHP使用 Pear 进行安装和卸载包的方法详解
2019/07/08 PHP
关于图片验证码设计的思考
2007/01/29 Javascript
ExtJs事件机制基本代码模型和流程解析
2010/10/24 Javascript
jq实现酷炫的鼠标经过图片翻滚效果
2014/03/12 Javascript
jQuery中:input选择器用法实例
2015/01/03 Javascript
在AngularJS中使用jQuery的zTree插件的方法
2016/04/21 Javascript
巧用Vue.js+Vuex制作专门收藏微信公众号的app
2016/11/03 Javascript
深入理解javascript函数参数与闭包
2016/12/12 Javascript
JavaScript中数组的各种操作的总结(必看篇)
2017/02/13 Javascript
angular.fromJson与toJson方法用法示例
2017/05/17 Javascript
jstree单选功能的实现方法
2017/06/07 Javascript
JavaScript事件方法(实例讲解)
2017/06/27 Javascript
Django+Vue.js搭建前后端分离项目的示例
2017/08/07 Javascript
JQuery 选择器、DOM节点操作练习实例
2017/09/28 jQuery
让webpack+vue-cil项目不再自动打开浏览器的方法
2018/09/27 Javascript
javascript使用substring实现的展开与收缩文字功能示例
2019/06/17 Javascript
微信小程序动画组件使用解析,类似vue,且更强大
2019/08/01 Javascript
微信小程序 wxParse插件显示视频问题
2019/09/27 Javascript
JavaScript实现简单的弹窗效果
2020/05/19 Javascript
vue样式穿透 ::v-deep的具体使用
2020/06/04 Javascript
python中list常用操作实例详解
2015/06/03 Python
python学习入门细节知识点
2018/03/29 Python
python3+PyQt5+Qt Designer实现堆叠窗口部件
2018/04/20 Python
Python实现串口通信(pyserial)过程解析
2019/09/25 Python
Python接口测试文件上传实例解析
2020/05/22 Python
python中os.remove()用法及注意事项
2021/01/31 Python
德国旅游网站:weg.de
2018/06/03 全球购物
《钱学森》听课反思
2014/03/01 职场文书
竞聘书格式及范文
2014/03/31 职场文书
《高尔基和他的儿子》教学反思
2014/04/09 职场文书
小区门卫的岗位职责
2014/09/26 职场文书
学校领导班子四风问题整改意见
2014/10/02 职场文书
亮剑观后感
2015/06/05 职场文书
2016年教师党员公开承诺书
2016/03/24 职场文书
创业计划书之儿童理发店
2019/09/27 职场文书