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. 运行mapreduce - java.lang.InterruptedException

    错误日志: 2018-11-19 05:23:51,686 WARN [main] util.NativeCodeLoader (NativeCodeLoader.java:<clinit> ...

  2. BZOJ 1005 明明的烦恼 Prufer序列+组合数学+高精度

    题目大意:给定一棵n个节点的树的节点的度数.当中一些度数无限制,求能够生成多少种树 Prufer序列 把一棵树进行下面操作: 1.找到编号最小的叶节点.删除这个节点,然后与这个叶节点相连的点计入序列 ...

  3. 如何将Python的py程序打包成跨平台的exe文件

    在编写了自己的第一个可以爬写网页源代码的程序之后,发现如果在没有安装了pythonLDLE程序的计算机上根本就跑不出来.所以开始寻找可以将程序打包成跨平台运行的exe文件. 经过自己费力的谷歌没有一个 ...

  4. C++语言笔记系列之二十——模版

    1.随意输入两个数x和y,输出最大值max. int max(int x, int y) {return x>y? x:y;} 2.函数模版 (1)用一种或者多种通用类型去表示函数--函数模版. ...

  5. pat(A)1041. Be Unique(哈希)

    1.链接:点击打开链接 2.代码: #include<cstdio> #include<iostream> #include<cstring> using name ...

  6. Lnixu Bash

    一.简单命令 1.创建文件(vi) vi hellowold.txt2.创建目录(mkdir) mkdir linux_bash3.删除文件(rm) rm helloworld.txt4.复制文件(c ...

  7. 点滴记录——Ubuntu 14.04中Chrome浏览器标题栏出现中文乱码

    今天不知道在系统里装的哪个软件与Chrome浏览器所用的字体向冲突了,导致标题栏显示的中文都变成了乱码,其次收藏栏中的中文也变成了乱码.导致原有的收藏内容都无法辨认了.在网上搜索了一下,也有人遇到了相 ...

  8. @Html.ValidationMessageFor客户端验证

    <%=Html.LabelFor(model => model.sUser) %><%=Html.TextBoxFor(model => model.sUser) %&g ...

  9. mysql字段去重方式

    一直找不出某个字段去重的前提下,还能够显示其它字段的数据 以下是解决方法: SELECT *, COUNT(DISTINCT( province)) FROM area_info WHERE type ...

  10. 【视频】零基础学Android开发:蓝牙聊天室APP(三)

    零基础学Android开发:蓝牙聊天室APP第三讲 3.1 ImageView.ImageButton控件具体解释 3.2 GridView控件具体解释 3.3 SimpleAdapter适配器具体解 ...