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是 ...
随机推荐
- Python第五讲
一.冒泡算法 1.将两个变量的值互换 a1 = 123 a2 = 456 #要想将a1与a2的值进行位置互换需要借助一个中间变量(temp) temp = a1#将a1的值赋值给temp(temp=1 ...
- 快看Sample代码,速学Swift语言(2)-基础介绍 快看Sample代码,速学Swift语言(1)-语法速览
快看Sample代码,速学Swift语言(2)-基础介绍 Swift语言是一个新的编程语言,用于iOS, macOS, watchOS, 和 tvOS的开发,不过Swift很多部分内容,我们可以从C或 ...
- spring实战笔记6---springMVC的请求过程
之前有一次在面试其中被问到了这个问题.当时说得不是非常清楚,有些细节的地方想不起来了.所以在这里从新回想和总结一下SpringMVC的起步.请求的运行过程. 在SpringMVC其中.跟请求(Requ ...
- Python标准库:内置函数complex([real[, imag]])
本函数能够使用參数real + imag*j方式创建一个复数.也能够转换一个字符串的数字为复数:或者转换一个数字为复数.假设第一个參数是字符串,第二个參数不用填写.会解释这个字符串且返回复数.只是,第 ...
- leetCode 81.Search in Rotated Sorted Array II (旋转数组的搜索II) 解题思路和方法
Follow up for "Search in Rotated Sorted Array": What if duplicates are allowed? Would this ...
- ORA-09817
连接数据库的时候报:ORA-09817:write to audit file,在网上搜索了下,发现时oracle安装目录下面的磁盘空间不够,有不少人给出了解决办法,下面即是一例: 连接oracle ...
- javaScript复制粘贴
1.clipboard.js 实现了纯 JavaScript (无 Flash)的浏览器内容复制到系统剪贴板的功能.可以在浏览器和 Node 环境中使用.支持 Chrome 42+.Firefox 4 ...
- html5--项目实战-仿天猫(移动端页面)
html5--项目实战-仿天猫(移动端页面) 总结: 1.标准搜索栏的做法:这里是弹性布局,放大镜和小话筒是background img 2.手机尾部导航做法:这是一个个 li 标签,每个li标签占% ...
- scrapy学习笔记:项目中 使用代理ip
做为一个爬虫,最头疼的问题就是你的ip被封,想要在Scrapy领域无限制畅游,做好伪装是第一步,于是乎,抓取代理IP成了很多教程的开始部分.这里我说一下代理scrapy中代理ip,仅供大家借鉴! 代理 ...
- 【Codeforces 915E】 Physical Education Lessons
[题目链接] 点击打开链接 [算法] 线段树,注意数据量大,要动态开点 [代码] #include<bits/stdc++.h> using namespace std; ; ,root ...