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 操作select标签实现代码
May 14 Javascript
对于jQuery性能的一些优化建议
Aug 13 Javascript
Js的Array数组对象详解
Feb 22 Javascript
jQuery的层级查找方式分析
Jun 16 Javascript
jQuery插件Flexslider实现图片轮播、图文结合滑动切换效果
Apr 16 Javascript
微信小程序 wxapp画布 canvas详细介绍
Oct 31 Javascript
Angular angular-file-upload文件上传的示例代码
Aug 23 Javascript
在vue项目中优雅的使用SVG的方法实例详解
Dec 03 Javascript
vscode vue 文件模板的配置方法
Jul 23 Javascript
Vue包大小优化的实现(从1.72M到94K)
Feb 18 Vue.js
CocosCreator入门教程之网络通信
Apr 16 Javascript
React实现动效弹窗组件
Jun 21 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
浅析SVN常见问题及解决方法
2013/06/21 PHP
php强制文件下载而非在浏览器打开的自定义函数分享
2014/05/08 PHP
php使用GD创建保持宽高比缩略图的方法
2015/04/17 PHP
PHP array_reverse() 函数原理及实例解析
2020/07/14 PHP
js prototype 格式化数字 By shawl.qiu
2007/04/02 Javascript
js类的静态属性和实例属性的理解
2009/10/01 Javascript
javascript 读取XML数据,在页面中展现、编辑、保存的实现
2009/10/27 Javascript
JavaScript 浏览器验证代码(来自discuz)
2010/07/17 Javascript
suggestion开发小结以及对键盘事件的总结(针对中文输入法状态)
2011/12/20 Javascript
javascript打印大全(打印页面设置/打印预览代码)
2013/03/29 Javascript
iframe实用操作锦集
2014/04/22 Javascript
node.js中的fs.mkdir方法使用说明
2014/12/17 Javascript
js实现滚动条滚动到页面底部继续加载
2015/12/19 Javascript
Javascript的比较汇总
2016/07/25 Javascript
浅谈Node.js爬虫之网页请求模块
2018/01/11 Javascript
记一次Vue.js混入mixin的使用(分权限管理页面)
2019/04/17 Javascript
实例讲解JavaScript 计时事件
2020/07/04 Javascript
[01:46]2018完美盛典章节片——坚守
2018/12/17 DOTA
Ubuntu16.04/树莓派Python3+opencv配置教程(分享)
2018/04/02 Python
pandas 对每一列数据进行标准化的方法
2018/06/09 Python
pycharm debug功能实现跳到循环末尾的方法
2018/11/29 Python
详解Python安装tesserocr遇到的各种问题及解决办法
2019/03/07 Python
Python使用get_text()方法从大段html中提取文本的实例
2019/08/27 Python
Python while true实现爬虫定时任务
2020/06/08 Python
浅谈Python 函数式编程
2020/06/20 Python
python爬虫构建代理ip池抓取数据库的示例代码
2020/09/22 Python
CSS3区域模块region相关编写示例
2015/08/28 HTML / CSS
惠普加拿大在线商店:HP加拿大
2017/09/15 全球购物
微博营销计划书
2014/01/10 职场文书
工程售后服务承诺书
2014/05/21 职场文书
某某同志考察材料
2014/05/28 职场文书
回复函范文
2015/07/14 职场文书
2016初一新生军训心得体会
2016/01/11 职场文书
朋友圈早安励志语录!
2019/07/08 职场文书
MySQL创建高性能索引的全步骤
2021/05/02 MySQL
一篇文章告诉你如何实现Vue前端分页和后端分页
2022/02/18 Vue.js