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 相关文章推荐
js 函数的执行环境和作用域链的深入解析
Nov 01 Javascript
Javascript中For In语句用法实例
May 14 Javascript
js实现的下拉框二级联动效果
Apr 30 Javascript
详解基于angular-cli配置代理解决跨域请求问题
Jul 05 Javascript
vue 过滤器filter实例详解
Mar 14 Javascript
vue插件mescroll.js实现移动端上拉加载和下拉刷新
Mar 07 Javascript
微信小程序开发之点击按钮退出小程序的实现方法
Apr 26 Javascript
基于Node.js的大文件分片上传示例
Jun 19 Javascript
解决layui的form里的元素进行动态生成,验证失效的问题
Sep 14 Javascript
JS变量提升原理与用法实例浅析
May 22 Javascript
vue中移动端调取本地的复制的文本方式
Jul 18 Javascript
VUE使用axios调用后台API接口的方法
Aug 03 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生成短域名函数
2015/03/23 PHP
在WordPress中实现评论头像的自定义默认和延迟加载
2015/11/24 PHP
php记录搜索引擎爬行记录的实现代码
2018/03/02 PHP
PHP创建文件及写入数据(覆盖写入,追加写入)的方法详解
2019/02/15 PHP
PHP开发api接口安全验证操作实例详解
2020/03/26 PHP
ThinkPHP5分页paginate代码实例解析
2020/11/10 PHP
jquery 简单的进度条实现代码
2010/03/11 Javascript
window.location.hash 使用说明
2010/11/08 Javascript
基于jQuery的前端数据通用验证库
2011/08/08 Javascript
js通过更改按钮的显示样式实现按钮的滑动效果
2014/04/23 Javascript
jquery.mobile 共同布局遇到的问题小结
2015/02/10 Javascript
使用JavaScript刷新网页的方法
2015/06/04 Javascript
你有必要知道的25个JavaScript面试题
2015/12/29 Javascript
AngularJs  Creating Services详解及示例代码
2016/09/02 Javascript
vue引入swiper插件的使用实例
2017/07/19 Javascript
详解angularjs 学习之 scope作用域
2018/01/15 Javascript
微信小程序非跳转式组件授权登录的方法示例
2019/05/22 Javascript
vue-video-player实现实时视频播放方式(监控设备-rtmp流)
2020/08/10 Javascript
Nuxt的路由动画效果案例
2020/11/06 Javascript
python+mysql实现简单的web程序
2014/09/11 Python
python numpy格式化打印的实例
2018/05/14 Python
Python通用循环的构造方法实例分析
2018/12/19 Python
tensorflow指定CPU与GPU运算的方法实现
2020/04/21 Python
Jupyter 无法下载文件夹如何实现曲线救国
2020/04/22 Python
Python .py生成.pyd文件并打包.exe 的注意事项说明
2021/03/04 Python
德国拖鞋网站:German Slippers
2019/11/08 全球购物
控制工程专业个人求职信
2013/09/25 职场文书
物流管理专业求职信
2014/05/29 职场文书
入股协议书范本
2014/11/01 职场文书
爱晚亭导游词
2015/02/09 职场文书
小学生表扬稿范文
2015/05/05 职场文书
因工资原因离职的辞职信范文
2015/05/12 职场文书
党支部考察意见范文
2015/06/02 职场文书
2016中秋节晚会开场白
2015/11/26 职场文书
python设置 matplotlib 正确显示中文的四种方式
2021/05/10 Python
深入理解python协程
2021/06/15 Python