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 解析xml文件
Aug 09 Javascript
修改jquery.lazyload.js实现页面延迟载入
Dec 22 Javascript
jquery选择器之内容过滤选择器详解
Jan 27 Javascript
node.js中的fs.mkdir方法使用说明
Dec 17 Javascript
Angularjs全局变量被作用域监听的正确姿势
Feb 06 Javascript
angular route中使用resolve在uglify压缩后问题解决
Sep 21 Javascript
JS中setTimeout和setInterval的最大延时值详解
Feb 13 Javascript
vue-resource拦截器设置头信息的实例
Oct 27 Javascript
浅谈Vuex的状态管理(全家桶)
Nov 04 Javascript
js数组去重的N种方法(小结)
Jun 07 Javascript
微信小程序一周时间表功能实现
Oct 17 Javascript
vue中的使用token的方法示例
Mar 10 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
第六节--访问属性和方法
2006/11/16 PHP
使用JSON实现数据的跨域传输的php代码
2011/12/20 PHP
PHP 如何利用phpexcel导入数据库
2013/08/24 PHP
使用PHPWord生成word文档的方法详解
2019/06/06 PHP
用window.location.href实现刷新另个框架页面
2007/03/07 Javascript
javascript中字符串替换函数replace()方法与c# 、vb 替换有一点不同
2010/06/25 Javascript
深入理解JavaScript作用域和作用域链
2011/10/21 Javascript
js报$ is not a function 的问题的解决方法
2014/01/20 Javascript
Javascript中的String对象详谈
2014/03/03 Javascript
JavaScript使用循环和分割来替换和删除元素实例
2014/10/13 Javascript
在Mac OS下使用Node.js的简单教程
2015/06/24 Javascript
Jquery实现瀑布流布局(备有详细注释)
2015/07/31 Javascript
js实现select跳转菜单新窗口效果代码分享(超简单)
2015/08/21 Javascript
jquery实现的仿天猫侧导航tab切换效果
2015/08/24 Javascript
confirm确认对话框的实现方法总结
2016/06/17 Javascript
javascript-解决mongoose数据查询的异步操作
2016/12/22 Javascript
uploader秒传图片到服务器完整代码
2017/04/22 Javascript
jQuery 循环遍历改变a标签的href(实例讲解)
2017/07/12 jQuery
解决Vue使用mint-ui loadmore实现上拉加载与下拉刷新出现一个页面使用多个上拉加载后冲突问题
2017/11/07 Javascript
多个vue子路由文件自动化合并的方法
2019/09/03 Javascript
详解为element-ui的Select和Cascader添加弹层底部操作按钮
2020/02/07 Javascript
JS使用Chrome浏览器实现调试线上代码
2020/07/23 Javascript
[05:45]Ti4观战指南(下)
2014/07/07 DOTA
[02:16]深扒TI7聊天轮盘语音出处2
2017/05/11 DOTA
Python中用Decorator来简化元编程的教程
2015/04/13 Python
python next()和iter()函数原理解析
2020/02/07 Python
python实现一次性封装多条sql语句(begin end)
2020/06/06 Python
如何使用Django Admin管理后台导入CSV
2020/11/06 Python
python 获取计算机的网卡信息
2021/02/18 Python
外科实习自我鉴定
2013/10/06 职场文书
酒店实习个人鉴定
2013/12/07 职场文书
环保口号大全
2014/06/12 职场文书
文明城市标语
2014/06/16 职场文书
2015年度信用社工作总结
2015/05/04 职场文书
2015年大学迎新晚会总结
2015/07/16 职场文书
详解MySQL的内连接和外连接
2023/05/08 MySQL