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监听对象及对应值的变化的更多相关文章

  1. Vue——watch监听对象,监听嵌套多次的对象属性

    首先是watch 然后是methods

  2. 实时监听input输入框value值的变化

    1.js 的 oninput & onpropertychange JS中的 oninput 事件在 IE9 以下版本不支持,需要使用 IE 特有的 onpropertychange 事件替代 ...

  3. Vue之watch监听对象中某个属性的方法

    新建 userinfo = { name: "小明",  age: "18", } vue中watch监听name的方法 1. 可以结合计算属性的方法实现 { ...

  4. vue 监听对象里的特定数据

    vue  监听对象里的特定数据变化 通常是这样写的,只能监听某一个特定数据 watch: { params: function(val) { console.log(val) this.$ajax.g ...

  5. vue--》如何使用wacth监听对象的属性变化?

    在开发过程中,我们经常需要监听watch监听一个对象的变化,但是如何来实现     监听对象中属性的变化呢? 先回顾一下如何监听整个对象的变化,使用watch就行了 export default { ...

  6. 在vue中使用watch监听对象或数组

    最近发现在vue中使用watch监听对象或者数组时,当数组或者对象只是单一的值改变时,并不会出发watch中的事件. 在找问题过程中,发现当数组使用push一类的方法时,会触发watch,如果只是单一 ...

  7. vue watch监听不到对象,探究 watch 原理

    最近使用vue watch时,在某些模块监听不到对象的改变,无法触发回调函数. 解决: 使用watch监听对象时,只能监听到该对象初始化时已存在的key值. 如下例监听user对象,在初始化时没有ag ...

  8. Vue -- 数据监听

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. vue中监听数据变化 watch

    今天做项目的时候,子组件中数据(原本固定的数据)需要父组件动态传入,如果一开始初始化用到的数据.但当时还没有获取到,初始化结束就不会更新数据了.只有监听这两个属性,再重新执行初始化. 1.watch是 ...

随机推荐

  1. 实例 mount新硬盘方法

    0.建立挂载文件夹: mkdir /mnt/sdb1 1 .查看新硬盘: fdisk -l 2. 硬盘分区: fdisk /dev/sdb1 根据提示,依次输入 n, p, 1, 以及两次回车,然后是 ...

  2. 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 ...

  3. Office EXCEL 如何保留一位小数,并且单击这个单元格的时候没有一大串小数

    左侧有一列数据,即便我设置单元格格式,把小数位数设为1,看上去的确四舍五入,保留一位小数了,但是实际上我鼠标双击任意单元格,还是原来的数值,这样的数据如果是要发给别人的,肯定不好   如果进行选择性粘 ...

  4. 微信小程序实战之 pay(支付页面)

    项目目录: 逻辑层: pay.js // pages/pay/pay.js Page({ /** * 页面的初始数据 */ data: { resultType: "", resu ...

  5. android 自己主动拒接后再取消自己主动拒接,该联系人来电界面无图标显示,且点击挂断无反应

    1.    设置一个联系人为自己主动拒接 2.    该联系人来电 3.    取消该联系人的自己主动拒接 4.    该联系人来电 Error: 来电界面无头像显示,直接显示黑屏,且点击拒接butt ...

  6. Common non-standard response fields

    https://en.wikipedia.org/wiki/List_of_HTTP_header_fields#cite_note-52 Common non-standard response f ...

  7. Lightoj 1016 - Brush (II)

    After the long contest, Samee returned home and got angry after seeing his room dusty. Who likes to ...

  8. js用法2

    1,网站cookie document.cookie 2, Web Storage相当于cookie,当存储量大于cookie localStorage 存储格式都是字符串 有效期,清空缓存前,永远存 ...

  9. 【Selenium】idea导入eclisp项目的问题

    ①导入:file→new→Project from exiting 选择ecliesp 然后next就可以 ②添加依赖:每个包都要加,引用其他包的类,也要添加依赖 setting选择junit4

  10. 学习笔记::AC自动机

    最先开始以为和自动刷题机是一个东西... 其实就是kmp的一个拓展.学完kmp再学这个就会发现其实不难 1.kmp是一个串匹配一个串,但是当我们想用多个串匹配一个文本的时候,kmp就不行了,因此我们有 ...