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 相关文章推荐
JavaScript constructor和instanceof,JSOO中的一对欢喜冤家
May 25 Javascript
基于jQuery实现点击同时更改两个iframe的网址
Jul 01 Javascript
js鼠标滑过弹出层的定位IE6bug解决办法
Dec 26 Javascript
分享一个自己动手写的jQuery分页插件
Aug 28 Javascript
js手动播放图片实现图片轮播效果
Sep 17 Javascript
jQuery实现移动端手机商城购物车功能
Sep 24 Javascript
AngularJS实现自定义指令及指令配置项的方法
Nov 20 Javascript
vue源码解析之事件机制原理
Apr 21 Javascript
node基于puppeteer模拟登录抓取页面的实现
May 09 Javascript
angular ng-model 无法获取值的处理方法
Oct 02 Javascript
vue实现循环切换动画
Oct 17 Javascript
小程序和web画三角形实现解析
Sep 02 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 数据库字段复用的基本原理与示例
2011/07/22 PHP
解析php中memcache的应用
2013/06/18 PHP
orm获取关联表里的属性值
2016/04/17 PHP
PHP微信支付结果通知与回调策略分析
2019/01/10 PHP
脚本收藏iframe
2006/07/21 Javascript
js CSS操作方法集合
2008/10/31 Javascript
Extjs gridpanel 出现横向滚动条问题的解决方法
2011/07/04 Javascript
分享8款优秀的 jQuery 加载动画和进度条插件
2012/10/24 Javascript
Javascript实现重力弹跳拖拽运动效果示例
2013/06/28 Javascript
extjs_02_grid显示本地数据、显示跨域数据
2014/06/23 Javascript
javascript实现tab切换特效
2015/11/12 Javascript
javascript中活灵活现的Array对象详解
2016/11/30 Javascript
vue2.0开发实践总结之入门篇
2016/12/06 Javascript
将鼠标焦点定位到文本框最后(代码分享)
2017/01/11 Javascript
浅谈sass在vue注意的地方
2017/08/10 Javascript
vue使用axios跨域请求数据问题详解
2017/10/18 Javascript
jsonp跨域获取数据的基础教程
2018/07/01 Javascript
angular2 组件之间通过service互相传递的实例
2018/09/30 Javascript
Javascript实现一朵从含苞到绽放的玫瑰
2019/03/30 Javascript
JavaScript 处理树数据结构的方法示例
2019/06/16 Javascript
[06:06]2018DOTA2亚洲邀请赛主赛事第四日战况回顾 全明星赛欢乐上演
2018/04/07 DOTA
小小聊天室Python代码实现
2016/08/17 Python
python3实现网络爬虫之BeautifulSoup使用详解
2018/12/19 Python
Python 矩阵转置的几种方法小结
2019/12/02 Python
py-charm延长试用期限实例
2019/12/22 Python
python实现b站直播自动发送弹幕功能
2021/02/20 Python
css3 图片圆形显示 如何CSS将正方形图片显示为圆形图片布局
2014/10/10 HTML / CSS
解析HTML5中的新功能本地存储localStorage
2016/03/01 HTML / CSS
伦敦的高级牛仔布专家:Trilogy
2018/08/06 全球购物
期末自我鉴定
2014/01/23 职场文书
小学教师师德感言
2014/02/10 职场文书
态度决定一切演讲稿
2014/05/20 职场文书
七年级地理教学计划
2015/01/22 职场文书
幼儿园教师师德承诺书
2015/04/28 职场文书
使用Nginx的访问日志统计PV与UV
2022/05/06 Servers
Win10开机修复磁盘错误怎么跳过?Win10关闭开机磁盘检查的方法
2022/09/23 数码科技