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. Linux 上运行 mapreduce 类型错误

    1.ClassCastException 错误代码 /** * */ /** * @author hadoop * */ package WordCount; import java.io.IOExc ...

  2. ldd

    ldd命令用于判断某个可执行的 binary 档案含有什么动态函式库 [diego@localhost ~/work/branch_dispatch_201511/rtqa_center/source ...

  3. 解决pycharm下安装reportLab报错的问题

    在利用pycharm中自带的第三方安装工具安装reportLab时提示安装失败.失败的原因是缺失第三方扩展包.经过查阅查阅资料了解到一些python的第三方扩展包是需要python-dev支持的.我装 ...

  4. c# 把一个匿名对象赋值给一个Object类型的变量后,怎么取这个变量? c# dynamic动态类型和匿名类 详解C# 匿名对象(匿名类型)、var、动态类型 dynamic 深入浅析C#中的var和dynamic

    比如有一个匿名对象,var  result =......Select( a=>new {  id=a.id, name=a.name});然后Object  obj =  result ;我怎 ...

  5. JS日历控件 灵活设置: 精确的时分秒.

     在今年7月份时候 写了一篇关于 "JS日历控件" 的文章 , 当时仅仅支持 年月日 的日历控件,如今优化例如以下:      1. 在原基础上 支持 yyyy-mm-dd 的年月 ...

  6. Java-ReentrantReadWriteLock的简单样例

    内容:读锁时共享的.写锁时相互排斥的(可见执行结果).都是通过AQS实现的. public class ReentrantReadWriteLockTest { static class MyObje ...

  7. Cocos2d-X-3.0 之后的版本的环境搭建

     Cocos2d-X-3.0 之后的版本的环境搭建 由于cocos2d游戏开发引擎更新十分频繁,官方文档同步不够及时和完善.所以不要照着官方文档来照做生成工程. <点击图片就能进入网站> ...

  8. Codeforces 480B Long Jumps 规律题

    题目链接:点击打开链接 题意: 输出n l x y 有一根直尺长度为l 上面有n个刻度. 以下n个数字是距离开头的长度(保证第一个数字是0,最后一个数字是l) 要使得 直尺中存在某2个刻度的距离为x ...

  9. LeetCode 1.两数之和(JS)

    Given an array of integers, return indices of the two numbers such that they add up to a specific ta ...

  10. JSP 与 ACTION 之间的跳转

    <script language="javascript">function delconfirm(url){ if(confirm("你确定要删除本条数据吗 ...