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是 ...
随机推荐
- 实例 mount新硬盘方法
0.建立挂载文件夹: mkdir /mnt/sdb1 1 .查看新硬盘: fdisk -l 2. 硬盘分区: fdisk /dev/sdb1 根据提示,依次输入 n, p, 1, 以及两次回车,然后是 ...
- Codefoces 436 B. Om Nom and Spiders
纯属练习JAVA.... B. Om Nom and Spiders time limit per test 3 seconds memory limit per test 256 megabytes ...
- Office EXCEL 如何保留一位小数,并且单击这个单元格的时候没有一大串小数
左侧有一列数据,即便我设置单元格格式,把小数位数设为1,看上去的确四舍五入,保留一位小数了,但是实际上我鼠标双击任意单元格,还是原来的数值,这样的数据如果是要发给别人的,肯定不好 如果进行选择性粘 ...
- 微信小程序实战之 pay(支付页面)
项目目录: 逻辑层: pay.js // pages/pay/pay.js Page({ /** * 页面的初始数据 */ data: { resultType: "", resu ...
- android 自己主动拒接后再取消自己主动拒接,该联系人来电界面无图标显示,且点击挂断无反应
1. 设置一个联系人为自己主动拒接 2. 该联系人来电 3. 取消该联系人的自己主动拒接 4. 该联系人来电 Error: 来电界面无头像显示,直接显示黑屏,且点击拒接butt ...
- Common non-standard response fields
https://en.wikipedia.org/wiki/List_of_HTTP_header_fields#cite_note-52 Common non-standard response f ...
- Lightoj 1016 - Brush (II)
After the long contest, Samee returned home and got angry after seeing his room dusty. Who likes to ...
- js用法2
1,网站cookie document.cookie 2, Web Storage相当于cookie,当存储量大于cookie localStorage 存储格式都是字符串 有效期,清空缓存前,永远存 ...
- 【Selenium】idea导入eclisp项目的问题
①导入:file→new→Project from exiting 选择ecliesp 然后next就可以 ②添加依赖:每个包都要加,引用其他包的类,也要添加依赖 setting选择junit4
- 学习笔记::AC自动机
最先开始以为和自动刷题机是一个东西... 其实就是kmp的一个拓展.学完kmp再学这个就会发现其实不难 1.kmp是一个串匹配一个串,但是当我们想用多个串匹配一个文本的时候,kmp就不行了,因此我们有 ...