vue watch监听对象及对应值的变化
data:{
a:1,
b:{
value:1,
type:1, }
},
watch:{
a(val, oldVal){//普通的watch监听
console.log("a: "+val, oldVal);
},
b:{//深度监听,可监听到对象、数组的变化
handler(val, oldVal){
console.log("b.value: "+val.value, oldVal.value);//但是这两个值打印出来却都是一样的
},
deep:true
}
}
如果只想监听b中的value,怎么办
方法一:
watch:{
a(val, oldVal){//普通的watch监听
console.log("a: "+val, oldVal);
},
'b.value':{//深度监听,可监听到对象、数组的变化
handler(val, oldVal){
console.log("b.value: "+val.value, oldVal.value);//但是这两个值打印出来却都是一样的
},
deep:true
}
}
方法二,借助computed
computed: {
newNum: function () {
return this.b.value
}
}
watch:{
newNum:{
handler(val, oldVal){
console.log(oldVal);
},
deep:true
}
}
vue watch监听对象及对应值的变化的更多相关文章
- Vue——watch监听对象,监听嵌套多次的对象属性
首先是watch 然后是methods
- 实时监听input输入框value值的变化
1.js 的 oninput & onpropertychange JS中的 oninput 事件在 IE9 以下版本不支持,需要使用 IE 特有的 onpropertychange 事件替代 ...
- Vue之watch监听对象中某个属性的方法
新建 userinfo = { name: "小明", age: "18", } vue中watch监听name的方法 1. 可以结合计算属性的方法实现 { ...
- vue 监听对象里的特定数据
vue 监听对象里的特定数据变化 通常是这样写的,只能监听某一个特定数据 watch: { params: function(val) { console.log(val) this.$ajax.g ...
- vue--》如何使用wacth监听对象的属性变化?
在开发过程中,我们经常需要监听watch监听一个对象的变化,但是如何来实现 监听对象中属性的变化呢? 先回顾一下如何监听整个对象的变化,使用watch就行了 export default { ...
- 在vue中使用watch监听对象或数组
最近发现在vue中使用watch监听对象或者数组时,当数组或者对象只是单一的值改变时,并不会出发watch中的事件. 在找问题过程中,发现当数组使用push一类的方法时,会触发watch,如果只是单一 ...
- vue watch监听不到对象,探究 watch 原理
最近使用vue watch时,在某些模块监听不到对象的改变,无法触发回调函数. 解决: 使用watch监听对象时,只能监听到该对象初始化时已存在的key值. 如下例监听user对象,在初始化时没有ag ...
- Vue -- 数据监听
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue中监听数据变化 watch
今天做项目的时候,子组件中数据(原本固定的数据)需要父组件动态传入,如果一开始初始化用到的数据.但当时还没有获取到,初始化结束就不会更新数据了.只有监听这两个属性,再重新执行初始化. 1.watch是 ...
随机推荐
- Linux内核project导论——网络:Filter(LSF、BPF、eBPF)
概览 LSF(Linux socket filter)起源于BPF(Berkeley Packet Filter).基础从架构一致.但使用更简单.LSF内部的BPF最早是cBPF(classic).后 ...
- Windows和linux双系统——改动默认启动顺序
电脑上装了Windows 7和Ubantu双系统,因为Linux系统用的次数比較少而且还是默认的启动项对此非常不能容忍,因此得改动Windows为默认的启动项. 因为电脑上的系统引导程序是GRUB,因 ...
- linux core文件设置
http://blog.csdn.net/ctthuangcheng/article/details/8963551 linux core文件设置 分类: Linux OS Debugging Te ...
- “var arr = []; ”和 “var arr = {};” 的差别
1.面试题 var arr = []; var arr = {}; 比較上述代码有什么差别? 2.解析 var arr = [];是一个数组对象 var arr = {} ...
- Flex+Java+Blazeds
1.环境:jdk1.6,Flex4.6 2.工具:MyEclipse10 3.server:Tomcat7 4.连接方式:Blazeds 5.项目类型:Flex项目 6.步骤 (1)新建Flex项目一 ...
- Setting Up FastCGI Proxying
http://nginx.org/en/docs/beginners_guide.html
- 运行tomcat6w.exe ,提示 指定的服务未安装 unable to open the service 'tomcat6'
错误:运行tomcat6w.exe ,提示 指定的服务未安装 unable to open the service 'tomcat6'(我用的是官网下载的解压版) 解决方法: 打开命令行提示符窗口=& ...
- C语言-1.static 和 extern使用,2.文件,3.数据块读写
1.static 和 extern使用, 1)修饰局部变量 static修饰局部变量特点:延长局部变量的生命周期 ,static修饰的局部变量只会被执行一次 extern不能修饰局部变量 2)修饰全局 ...
- C# QRCode 二维码
/*********************************************************************** * C# QRCode 二维码 * 说明: * 本文记 ...
- 【SCOI 2005】 繁忙的都市
[题目链接] 点击打开链接 [算法] 题目描述比较繁琐,但细心观察后,发现其实就是用kruskal算法求最小生成树 [代码] #include<bits/stdc++.h> using n ...