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类的封装及实现代码
Dec 02 Javascript
javascript 全等号运算符使用说明
May 31 Javascript
AngularJS 遇到的小坑与技巧小结
Jun 07 Javascript
vue2.0多条件搜索组件使用详解
Mar 26 Javascript
jQuery简单绑定单个事件的方法示例
Jun 10 jQuery
VUE实现表单元素双向绑定(总结)
Aug 08 Javascript
jQuery EasyUI结合zTree树形结构制作web页面
Sep 01 jQuery
vue组件学习教程
Sep 09 Javascript
用node开发并发布一个cli工具的方法步骤
Jan 03 Javascript
关于Layui Table隐藏列问题
Sep 16 Javascript
Vue + Scss 动态切换主题颜色实现换肤的示例代码
Apr 27 Javascript
JS highcharts实现动态曲线代码示例
Oct 16 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 格式化数字的时候注意数字的范围
2010/04/13 PHP
php生成过去100年下拉列表的方法
2015/07/20 PHP
Laravel使用memcached缓存对文章增删改查进行优化的方法
2016/10/08 PHP
使用CSS3实现字体颜色渐变的实现
2021/03/09 HTML / CSS
使用javascript访问XML数据的实例
2006/12/27 Javascript
比较全面的event对像在IE与FF中的区别 推荐
2009/09/21 Javascript
写得不错的jquery table鼠标经过变色代码
2013/09/27 Javascript
javascript简单性能问题及学习笔记
2014/02/04 Javascript
jquery实现对联广告的方法
2015/02/05 Javascript
JQuery限制复选框checkbox可选中个数的方法
2015/04/20 Javascript
再谈JavaScript线程
2015/07/10 Javascript
jquery简单实现幻灯片的方法
2015/08/03 Javascript
利用vue-router实现二级菜单内容转换
2016/11/30 Javascript
canvas实现爱心和彩虹雨效果
2017/03/09 Javascript
微信小程序利用co处理异步流程的方法教程
2017/05/20 Javascript
nodejs 子进程正确的打开方式
2017/07/03 NodeJs
Cpage.js给组件绑定事件的实现代码
2017/08/31 Javascript
js传递数组参数到后台controller的方法
2018/03/29 Javascript
vue.js中created方法作用
2018/03/30 Javascript
详解使用vue-admin-template的优化历程
2018/05/20 Javascript
[19:54]夜魇凡尔赛茶话会 第一期02:看图识人
2021/03/11 DOTA
python_opencv用线段画封闭矩形的实例
2018/12/05 Python
Python生态圈图像格式转换问题(推荐)
2019/12/02 Python
python Qt5实现窗体跟踪鼠标移动
2019/12/13 Python
Django异步任务线程池实现原理
2019/12/17 Python
nginx搭建基于python的web环境的实现步骤
2020/01/03 Python
python 6行代码制作月历生成器
2020/09/18 Python
CSS3 二级导航菜单的制作的示例
2018/04/02 HTML / CSS
Ray-Ban雷朋美国官网:全球领先的太阳眼镜品牌
2016/07/20 全球购物
用C或者C++语言实现SOCKET通信
2015/02/24 面试题
工作失职检讨书范文
2014/01/16 职场文书
教师考核评语
2014/04/28 职场文书
经济管理自荐书
2014/06/09 职场文书
合作协议书格式
2014/08/19 职场文书
Python使用UDP实现720p视频传输的操作
2021/04/24 Python
python opencv人脸识别考勤系统的完整源码
2021/04/26 Python