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 相关文章推荐
Jquery.TreeView结合ASP.Net和数据库生成菜单导航条
Aug 27 Javascript
js截取函数(indexOf,join等)
Sep 01 Javascript
js列举css中所有图标的实现代码
Jul 04 Javascript
解决javascript:window.close()在chrome,Firefox下失效的问题
May 07 Javascript
Node.js异步I/O学习笔记
Nov 04 Javascript
js从数组中删除指定值(不是指定位置)的元素实现代码
Sep 13 Javascript
JavaScript用JSONP跨域请求数据实例详解
Jan 06 Javascript
使用D3.js构建实时图形的示例代码
Aug 28 Javascript
electron + vue项目实现打印小票功能及实现代码
Nov 25 Javascript
vue+SSM实现验证码功能
Dec 07 Javascript
Vue安装浏览器开发工具的步骤详解
May 12 Javascript
通过javascript实现扫雷游戏代码实例
Feb 09 Javascript
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
php resizeimage 部分jpg文件 生成缩略图失败的原因分析及解决办法
2016/03/23 PHP
php is_executable判断给定文件名是否可执行实例
2016/09/26 PHP
TP5.0框架实现无限极回复功能的方法分析
2019/05/04 PHP
PHP读取XML文件的方法实例总结【DOMDocument及simplexml方法】
2019/09/10 PHP
初学JavaScript_03(ExtJs Grid的简单使用)
2008/10/02 Javascript
JS上传前预览图片实例
2013/03/25 Javascript
js拖拽一些常见的思路方法整理
2014/03/19 Javascript
每天一篇javascript学习小结(基础知识)
2015/11/10 Javascript
解读Bootstrap v4 sass设计
2016/05/29 Javascript
jQuery Validate表单验证插件的基本使用方法及功能拓展
2017/01/04 Javascript
node.js操作mysql简单实例
2017/05/25 Javascript
bootstrap daterangepicker双日历时间段选择控件详解
2017/06/15 Javascript
js单页hash路由原理与应用实战详解
2017/08/14 Javascript
ES6/JavaScript使用技巧分享
2017/12/14 Javascript
Angular5中状态管理的实现
2018/09/03 Javascript
微信小程序实现通过双向滑动缩放图片大小的方法
2018/12/30 Javascript
聊聊鉴权那些事(推荐)
2019/08/22 Javascript
windows实现npm和cnpm安装步骤
2019/10/24 Javascript
你知道JavaScript Symbol类型怎么用吗
2020/01/08 Javascript
[02:44]DOTA2英雄基础教程 克林克兹
2014/01/15 DOTA
[43:32]2014 DOTA2华西杯精英邀请赛 5 25 LGD VS NewBee第一场
2014/05/26 DOTA
Collatz 序列、逗号代码、字符图网格实例
2017/06/22 Python
Python实现的爬虫功能代码
2017/06/24 Python
Python发展史及网络爬虫
2019/06/19 Python
Django 静态文件配置过程详解
2019/07/23 Python
python代码如何实现余弦相似性计算
2020/02/09 Python
python使用requests库爬取拉勾网招聘信息的实现
2020/11/20 Python
python3实现简单飞机大战
2020/11/29 Python
Baracuta官方网站:Harrington夹克,G9,G4,G10等
2018/03/06 全球购物
导游个人求职信范文
2014/03/23 职场文书
企业精神口号
2014/06/11 职场文书
2014年电厂工作总结
2014/12/04 职场文书
先进教师个人总结
2015/02/11 职场文书
清明祭英烈活动总结
2015/05/11 职场文书
上帝为你开了一扇窗之Tkinter常用函数详解
2021/06/02 Python
tomcat默认最大连接数及相关调整方法
2022/05/06 Servers