vue watch关于对象内的属性监听


Posted in Javascript onApril 22, 2019

vue可以通过watch监听data内数据的变化。通常写法是:

data: {
 a: 100
},
watch: {
 a(newval, oldVal) {
  // 做点什么。。。
  console.log(newval, oldVal)
 }
}

vue监听整个对象,如下:

•deep: true 深度监测

data: {
 return {
  msg: {
   name: 'hahah',
   color: 'red'
  }
 }
}
watch: {
 msg: {
  handler(newValue, oldValue) {
   // 做点什么。。。
   console.log(newValue)
 },
 deep: true
}

如果监听对象内的某一具体属性,可以通过computed做中间层来实现:

computed: {
 name() {
  return this.msg.name
 }
},
watch:{
 name(newValue, oldValue) {
   // 做点什么。。。
   console.log(newval, oldVal)
 }
}

总结

以上所述是小编给大家介绍的vue watch关于对象内的属性监听的相关知识,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
ajax 文件上传应用简单实现
Mar 03 Javascript
javascript 控制input只允许输入的各种指定内容
Jun 19 Javascript
js 定义对象数组(结合)多维数组方法
Jul 27 Javascript
jQuery实现的购物车物品数量加减功能代码
Nov 16 Javascript
JavaScript数组操作详解
Feb 04 Javascript
jquery实现限制textarea输入字数的方法
Sep 06 jQuery
React数据传递之组件内部通信的方法
Dec 31 Javascript
微信小程序实现跑马灯效果完整代码(附效果图)
May 30 Javascript
JS判断字符串是否为整数的方法--简单的正则判断
Jul 23 Javascript
在react中使用vuex的示例代码
Jul 30 Javascript
Vue实例的对象参数options的几个常用选项详解
Nov 08 Javascript
vue实现锚点定位功能
Jun 29 Vue.js
vue项目中仿element-ui弹框效果的实例代码
Apr 22 #Javascript
对于防止按钮重复点击的尝试详解
Apr 22 #Javascript
Vue render函数实战之实现tabs选项卡组件
Apr 22 #Javascript
详解Vue依赖收集引发的问题
Apr 22 #Javascript
JS大坑之19位数的Number型精度丢失问题详解
Apr 22 #Javascript
Vue $mount实战之实现消息弹窗组件
Apr 22 #Javascript
深入理解vue中的slot与slot-scope
Apr 22 #Javascript
You might like
linux下删除7天前日志的代码(php+shell)
2011/01/02 PHP
在laravel框架中实现封装公共方法全局调用
2019/10/14 PHP
document.all与WEB标准
2020/05/13 Javascript
javascript 解析后的xml对象的读取方法细解
2009/07/25 Javascript
十个优秀的Ajax/Javascript实例网站收集
2010/03/31 Javascript
javascript实现数字验证码的简单实例
2014/02/10 Javascript
js过滤HTML标签完整实例
2015/11/26 Javascript
jQuery事件绑定方法学习总结(推荐)
2016/11/21 Javascript
jQuery中Chosen三级联动功能实例代码
2017/03/07 Javascript
jQuery遍历节点方法汇总(推荐)
2017/05/13 jQuery
Vuejs 单文件组件实例详解
2018/02/09 Javascript
vue中使用vue-cli接入融云实现即时通信
2019/04/19 Javascript
Node.js Domain 模块实例详解
2020/03/18 Javascript
JavaScript计算出两个数的差值
2020/03/19 Javascript
浅谈vue-props的default写不写有什么区别
2020/08/09 Javascript
[01:15:00]LGD vs Mineski Supermajor 胜者组 BO3 第一场 6.5
2018/06/06 DOTA
详解Python中的文本处理
2015/04/11 Python
在DigitalOcean的服务器上部署flaskblog应用
2015/12/19 Python
Python三级目录展示的实现方法
2016/09/28 Python
浅谈python正则的常用方法 覆盖范围70%以上
2018/03/14 Python
Django框架模板文件使用及模板文件加载顺序分析
2019/05/23 Python
基于Python实现大文件分割和命名脚本过程解析
2019/09/29 Python
python实现小世界网络生成
2019/11/21 Python
纯CSS3实现移动端展开和收起效果的示例代码
2020/04/26 HTML / CSS
Ben Sherman官方网站:英国男装品牌
2019/10/22 全球购物
随机分配座位,共50个学生,使学号相邻的同学座位不能相邻
2014/01/18 面试题
杭州联环马网络笔试题面试题
2013/08/04 面试题
幼儿教育感言
2014/02/05 职场文书
团代会主持词
2014/04/02 职场文书
辞职信格式模板
2015/02/27 职场文书
撤诉书怎么写
2015/05/19 职场文书
新生儿未入户证明
2015/06/23 职场文书
七一晚会主持词
2015/06/29 职场文书
换届选举主持词
2015/07/03 职场文书
初一年级组工作总结
2015/08/12 职场文书
python中pymysql包操作数据库方法
2022/04/19 Python