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 相关文章推荐
Javascript document.referrer判断访客来源网址
May 15 Javascript
Three.js源码阅读笔记(Object3D类)
Dec 27 Javascript
JS格式化数字保留两位小数点示例代码
Oct 15 Javascript
javascript遍历控件实例详细解析
Jan 10 Javascript
Javascript中类式继承和原型式继承的实现方法和区别之处
Apr 25 Javascript
jQuery Ajax自定义分页组件(jquery.loehpagerv1.0)实例详解
May 01 jQuery
JavaScript插件Tab选项卡效果
Nov 14 Javascript
web前端vue之vuex单独一文件使用方式实例详解
Jan 11 Javascript
移动端自适应flexible.js的使用方法(不用三大框架,仅写一个单html页面使用)推荐
Apr 02 Javascript
React中使用外部样式的3种方式(小结)
May 28 Javascript
vue axios请求成功却进入catch的原因分析
Sep 08 Javascript
前端vue+elementUI如何实现记住密码功能
Sep 20 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
Zend Framework教程之Zend_Config_Ini用法分析
2016/03/23 PHP
PHP实现批量重命名某个文件夹下所有文件的方法
2017/09/04 PHP
Laravel框架查询构造器简单示例
2019/05/08 PHP
JavaScript isPrototypeOf和hasOwnProperty使用区别
2010/03/04 Javascript
基于JQUERY的多级联动代码
2012/01/24 Javascript
jquery ajax 调用失败的原因示例介绍
2013/09/27 Javascript
jquery操作 iframe的方法
2014/12/03 Javascript
jquery实现根据浏览器窗口大小自动缩放图片的方法
2015/07/17 Javascript
快速掌握Node.js环境的安装与运行方法
2016/02/16 Javascript
javascript闭包功能与用法实例分析
2017/04/06 Javascript
JS实现简易的图片拖拽排序实例代码
2017/06/09 Javascript
vue.js实现条件渲染的实例代码
2017/06/22 Javascript
jQuery实现动态给table赋值的方法示例
2017/07/04 jQuery
基于vue-simplemde实现图片拖拽、粘贴功能
2018/04/12 Javascript
JS实现全屏预览F11功能的示例代码
2018/07/23 Javascript
jsonp跨域获取百度联想词的方法分析
2019/05/13 Javascript
详细教你微信公众号正文页SVG交互开发技巧
2019/07/25 Javascript
详解JS深拷贝与浅拷贝
2020/08/04 Javascript
js实现弹窗效果
2020/08/09 Javascript
js实现电灯开关效果
2021/01/19 Javascript
Python删除windows垃圾文件的方法
2015/07/14 Python
详解Python中的__getitem__方法与slice对象的切片操作
2016/06/27 Python
使用C++扩展Python的功能详解
2018/01/12 Python
python机器学习理论与实战(五)支持向量机
2018/01/19 Python
Python实现正弦信号的时域波形和频谱图示例【基于matplotlib】
2018/05/04 Python
Python 中 function(#) (X)格式 和 (#)在Python3.*中的注意事项
2018/11/30 Python
python+numpy实现的基本矩阵操作示例
2019/07/19 Python
python将YUV420P文件转PNG图片格式的两种方法
2021/01/22 Python
企业节能减排实施方案
2014/03/19 职场文书
合作意向书模板
2014/03/31 职场文书
股东合作协议书
2014/04/14 职场文书
优秀安全员事迹材料
2014/05/11 职场文书
乡镇党建工作汇报材料
2014/08/14 职场文书
村委会贫困证明范本
2014/09/17 职场文书
2019垃圾分类宣传口号汇总
2019/08/16 职场文书
JavaScript异步操作中串行和并行
2021/11/20 Javascript