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. leetcode ----Trie/stack专题

    一:Implement Trie (Prefix Tree) 题目: Implement a trie with insert, search, and startsWith methods. Not ...

  2. LoadRunner系列实例之— 01录制cas登陆脚本

    关于CAS 的概念,见链接 需要增加4个关联函数,初次加载页面时取cookie和it1,输入账号密码点击登录时,取ticketGrantingTicketId和it2 实际上前后台完成两次交互, // ...

  3. [IT学习]Python pandas 学习

    今天学习pandas来处理数据,结果用python 3.5.0的shell来调试,总是报错. 报错中包含如下字样: Traceback (most recent call last): File &q ...

  4. 65*24=1560<2175 对数据的统计支撑决策假设 历史数据正确的情况下,去安排今后的任务

    没有达到目标,原因不是时间投入不够,而是不用数据决策,不用数据调度定时脚本 [数据源情况统计]----># 近30天,日生效coin数目SELECT COUNT(DISTINCT coin) A ...

  5. 借助ltp语义分析提取特征,之后,文本生成

    """地点-哪里有做-业务-的(正规|靠谱)-公司?地点-做-业务-的(正规|靠谱)-公司(有哪些?|的联系方式是什么?|哪家口碑好值得信赖?)地点-做-业务-(怎么能省 ...

  6. 信息检索导论的课件——http://home.ustc.edu.cn/~zhufengx/ir/pdf/

    http://home.ustc.edu.cn/~zhufengx/ir/pdf/ 中科大

  7. I.MX6 U-boot编译找不到用户目录

    /**************************************************************************** * I.MX6 U-boot编译找不到用户目 ...

  8. Ubuntu TFTP 服务

    /******************************************************************** * Ubuntu TFTP 服务 * 说明: * 在Ubun ...

  9. 如何编写linux下nand flash驱动-2

    [Nand Flash引脚(Pin)的说明] 图3.Nand Flash引脚功能说明 上图是常见的Nand Flash所拥有的引脚(Pin)所对应的功能,简单翻译如下: 1.       I/O0 ~ ...

  10. filter() 函数

    描述 filter() 函数用于过滤序列,过滤掉不符合条件的元素,返回由符合条件元素组成的新列表. 该接收两个参数,第一个为函数,第二个为序列,序列的每个元素作为参数传递给函数进行判,然后返回 Tru ...