vue data中的对象的属性如何使用watch监听
在写项目的时候遇到了一个问题,就是需要动态监听data中一个对象的属性的变化。遇到了许多坑,在此过程中也发现了两种解决方案。
一、通过deep属性实现
data() {
return {
parent:{
child:1
}
};
},
watch:{
'parent.child':{
deep:true,
handler: function(newV, oldV) {
console.log(newV);
}
}
}
二、通过computed做中介
computed:{
newChild(){
return this.parent.child;
}
}
watch:{
newChild(newV,oldV){
alert(newV)
}
},
返回目录
vue data中的对象的属性如何使用watch监听的更多相关文章
- 统计Mongo数组中相同对象的属性之和
统计Mongo数组中相同对象的属性之和 需求 需要统计app端用户的行为,按天分表,存入mongo.每次用户进行操作的时候,将数据存入app本地,下次用户启动的时候,提交存入mongo,删除app本地 ...
- [原创]java WEB学习笔记59:Struts2学习之路---OGNL,值栈,读取对象栈中的对象的属性,读取 Context Map 里的对象的属性,调用字段和方法,数组,list,map
本博客的目的:①总结自己的学习过程,相当于学习笔记 ②将自己的经验分享给大家,相互学习,互相交流,不可商用 内容难免出现问题,欢迎指正,交流,探讨,可以留言,也可以通过以下方式联系. 本人互联网技术爱 ...
- HTML中DOM对象的属性和方法的层级关系是怎样的?(目录即层次)
HTML中DOM对象的属性和方法的层级关系是怎样的?(目录即层次) 一.总结 一句话总结:目录就是测试题 1.document取得元素(get element)的方式有哪几种? 解答:四种,分别是id ...
- vue中的computed(计算属性)和watch(监听属性)的特点,以及深度监听
//计算属性是根据data中已有的属性,计算得到一个新的属性, <div>全名:{{fullName}}</div> 创建计算属性通过computed关键字,它是一个对象 计算 ...
- JAVA中JavaBean对象之间属性拷贝的方法
JAVA中JavaBean对象之间的拷贝通常是用get/set方法,但如果你有两个属性相同的JavaBean或有大部分属性相同的JavaBean,对于这种情况,可以采用以下几个简便方法处理. 下面对这 ...
- 全面理解Javascript中Function对象的属性和方法
http://www.cnblogs.com/liontone/p/3970420.html 函数是 JavaScript 中的基本数据类型,在函数这个对象上定义了一些属性和方法,下面我们逐一来介绍这 ...
- List集合中的对象根据属性排序
集合类List存放的数据,默认是按照放入时的顺序存放的,比如依次放入A.B.C,则取得时候,则也是A.B.C的顺序,实际场景中,有时我们需要根据自定义的规则对List中的元素进行排序,该如何实现呢?看 ...
- JS中访问对象的属性
方式一: 对象名.属性名; 方式二: 对象名["属性名"]; ★注意:方式二中,属性名以字符串的形式出现在方括号中,这意味着通过方式二访问属性的话,可以实现“动态访问对象的 ...
- 你好,C++(38)从问题描述中发现对象的属性和行为 6.4 工资程序成长记:类与对象(上)
6.4 工资程序成长记:类与对象 “夜半三更哟,盼天明:寒冬腊月哟,盼春风.若要盼得哟,涨工资,岭上……”自从上次老板许诺给小陈涨工资以后,一转眼又过去几个月了,可是涨工资的事一点动静都没有.小陈只 ...
随机推荐
- 数据结构系列文章之队列 FIFO
转载自https://mp.weixin.qq.com/s/ILgdI7JUBsiATFICyyDQ9w Osprey 鱼鹰谈单片机 3月2日 预计阅读时间: 6 分钟 这里的 FIFO 是先入先出 ...
- python大数据初探--pandas,numpy代码示例
import pandas as pd import numpy as np dates = pd.date_range(',periods=6) dates import pandas as pd ...
- Jquery调用Ajax实现联动使用json
在很多时候我们都会使用到联动.jquery.js是一个不错的js框架.其ajax也挺不错.下面将实现一个js联动:选择公司出来受益人.根据公司不同受益人不同. 前提是:你用引入jquery.js &l ...
- 解决oracle 32位64位的问题
工具-选项-项目和解决方案-勾选第一个
- js实现OSS上传图片,STS临时授权访问OSS
1. 引入aliyun-oss-sdk.min.js <script type="text/javascript" src="/static/js/common/a ...
- CSP-S 模拟测试 45 题解
由于咕掉的题解太多了,所以只能趁改完不动题的时间,来补补坑qwq,还是太弱了. 考试过程: 到新机房的第一次考试,貌似海星? 第一题一开始就觉得是个贪心,但以为所有小怪兽都要打完,所以想复杂了,但后来 ...
- 物联网是前端工程师的新蓝海吗? | Live笔记
物联网是继 Web .无线之后的又一次重大技术变革,在变革的大潮中,程序员的知识体系和思维方式将面临全面更新. 前端开发的历史 在准备这个live的过程中,我回顾了前端开发短暂的历史,有几次我认为非常 ...
- #define定义宏函数 的正确使用
如何使用宏来定义一个自定义函数呢?首先我们来看下面这段代码 #define SQUARE(x) x*x int main() { int a = 5; printf("SQUARE(a): ...
- Sqlite3错误:Recursive use of cursors not allowed 的解决方案
感悟] 写完这篇日志后,有调了一段时间程序,又有了一点心得分享下: 一)爬稳定的数(dong)据(xi)最好存储下来,特别是数据库在国外的那种,下载时间成本太高昂了,存起来再处理,会节约很多时间: 二 ...
- 最近公共祖先lca模板
void dfs(int x,int root){//预处理fa和dep数组 fa[x][0]=root; dep[x]=dep[root]+1; for(int i=1;(1<<i)&l ...