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+css+html实现页面遮罩弹出框
Mar 21 Javascript
深入探究使JavaScript动画流畅的一些方法
Jun 30 Javascript
js漂浮广告实现代码
Aug 15 Javascript
javascript正则表达式总结
Feb 29 Javascript
BootStrap实现树形目录组件代码详解
Jun 21 Javascript
Bootstrap的class样式小结
Dec 01 Javascript
javascript基于原型链的继承及call和apply函数用法分析
Dec 15 Javascript
js事件冒泡与事件捕获详解
Feb 20 Javascript
Angular2的管道Pipe的使用方法
Nov 07 Javascript
CSS3结合jQuery实现动画效果及回调函数的实例
Dec 27 jQuery
基于jQuery使用Ajax动态执行模糊查询功能
Jul 05 jQuery
原生js实现each方法实例代码详解
May 27 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之第三天
2006/10/09 PHP
3种平台下安装php4经验点滴
2006/10/09 PHP
ThinkPHP php 框架学习笔记
2009/10/30 PHP
用PHP实现 上一篇、下一篇的代码
2012/09/29 PHP
php动态变量定义及使用
2015/06/10 PHP
详解PHP错误日志的获取方法
2015/07/20 PHP
php分页查询的简单实现代码
2017/03/14 PHP
总结PHP内存释放以及垃圾回收
2018/03/29 PHP
javascript 出生日期和身份证判断大全
2008/11/13 Javascript
使用Mootools动态添加Css样式表代码,兼容各浏览器
2011/12/12 Javascript
JS判断元素为数字的奇异写法分享
2012/08/01 Javascript
js导出txt示例代码
2014/01/14 Javascript
js中通过父级进行查找定位元素
2014/06/15 Javascript
jQuery.parseJSON(json)将JSON字符串转换成js对象
2014/07/27 Javascript
JQuery EasyUI 加载两次url的原因分析及解决方案
2014/08/18 Javascript
js常用系统函数用法实例分析
2015/01/12 Javascript
javascript实现点击后变换按钮显示文字的方法
2015/05/13 Javascript
javascript获取select值的方法分析
2015/07/02 Javascript
JavaScript地理位置信息API
2016/06/11 Javascript
基于Bootstrap实现的下拉菜单手机端不能选择菜单项的原因附解决办法
2016/07/22 Javascript
AngularJs导出数据到Excel的示例代码
2017/08/11 Javascript
ios中视频的最后一桢问题解决
2019/05/14 Javascript
vue中引入mxGraph的步骤详解
2019/05/17 Javascript
Javascript如何递归遍历本地文件夹
2020/08/06 Javascript
vue 导出文件,携带请求头token操作
2020/09/10 Javascript
JavaScript实现网页动态生成表格
2020/11/25 Javascript
Python 执行字符串表达式函数(eval exec execfile)
2014/08/11 Python
Python的爬虫包Beautiful Soup中用正则表达式来搜索
2016/01/20 Python
pycharm 实现显示project 选项卡的方法
2019/01/17 Python
Python学习笔记之字符串和字符串方法实例详解
2019/08/22 Python
tensorflow保持每次训练结果一致的简单实现
2020/02/17 Python
Python实现图片指定位置加图片水印(附Pyinstaller打包exe)
2021/03/04 Python
国际经济与贸易专业大学生职业规划书
2014/03/01 职场文书
机电系毕业生求职信
2014/07/11 职场文书
青年志愿者活动方案
2014/08/17 职场文书
诚实守信演讲稿
2014/09/01 职场文书