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 相关文章推荐
ECMAScript 创建自己的js类库
Nov 22 Javascript
js网页实时倒计时精确到秒级
Feb 10 Javascript
JavaScript实现字符串与日期的互相转换及日期的格式化
Mar 07 Javascript
Javascript 调用 ActionScript 的简单方法
Sep 22 Javascript
URL的参数中有加号传值变为空格的问题(URL特殊字符)
Nov 04 Javascript
Bootstrap3 图片(响应式图片&图片形状)
Jan 04 Javascript
浅谈Vue.js 1.x 和 2.x 实例的生命周期
Jul 25 Javascript
基于ES6作用域和解构赋值详解
Nov 03 Javascript
AngularJS实现的简单拖拽功能示例
Jan 02 Javascript
Node.js Buffer用法解读
May 18 Javascript
JavaScript实现读取与输出XML文件数据的方法示例
Jun 05 Javascript
Vue使用v-viewer实现图片预览
Oct 21 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
php4的session功能评述(一)
2006/10/09 PHP
用php实现批量查询清除一句话后门的代码
2008/01/20 PHP
PHP中break及continue两个流程控制指令区别分析
2011/04/18 PHP
解决File size limit exceeded 错误的方法
2013/06/14 PHP
PHP实现的统计数据功能详解
2016/12/06 PHP
php 处理png图片白色背景色改为透明色的实例代码
2018/12/10 PHP
this[] 指的是什么内容 讨论
2007/03/24 Javascript
AngularJs Injecting Services Into Controllers详解
2016/09/02 Javascript
JavaScript数据结构之链表的实现
2017/03/19 Javascript
vue音乐播放器插件vue-aplayer的配置及其使用实例详解
2017/07/10 Javascript
在Vue中如何使用Cookie操作实例
2017/07/27 Javascript
JavaScript事件处理程序详解
2017/09/19 Javascript
vue使用keep-alive实现数据缓存不刷新
2017/10/21 Javascript
JavaScript实现的DOM绘制柱状图效果示例
2018/08/08 Javascript
Ajax请求时无法重定向的问题解决代码详解
2019/06/21 Javascript
js设置默认时间跨度过程详解
2019/07/17 Javascript
layui操作列按钮个数和文字颜色的判断实例
2019/09/11 Javascript
基于redis的小程序登录实现方法流程分析
2020/05/25 Javascript
vue基于better-scroll实现左右联动滑动页面
2020/06/30 Javascript
vue+swiper实现左右滑动的测试题功能
2020/10/30 Javascript
[00:59]DOTA2荣耀之路1:Doom is back!weapon X!
2018/05/22 DOTA
[50:38]DOTA2-DPC中国联赛 正赛 Phoenix vs CDEC BO3 第二场 3月7日
2021/03/11 DOTA
Python学习小技巧之列表项的排序
2017/05/20 Python
python中使用xlrd读excel使用xlwt写excel的实例代码
2018/01/31 Python
python自动12306抢票软件实现代码
2018/02/24 Python
python学生管理系统代码实现
2020/04/05 Python
python实现对指定输入的字符串逆序输出的6种方法
2018/04/26 Python
解决Python2.7中IDLE启动没有反应的问题
2018/11/30 Python
python+requests实现接口测试的完整步骤
2020/10/27 Python
python海龟绘图之画国旗实例代码
2020/11/11 Python
python爬取2021猫眼票房字体加密实例
2021/02/19 Python
h5页面背景图很长要有滚动条滑动效果的实现
2021/01/27 HTML / CSS
高二学年自我鉴定范文(2篇)
2014/09/26 职场文书
公安交警个人对照检查材料思想汇报
2014/10/01 职场文书
导游词之井冈山
2019/11/20 职场文书
详解Python小数据池和代码块缓存机制
2021/04/07 Python