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 10 Javascript
匹配任意字符的正则表达式写法
Apr 29 Javascript
基于jQuery UI CSS Framework开发Widget的经验
Aug 21 Javascript
jquery等宽输出文字插件使用介绍
Sep 18 Javascript
js中apply方法的使用详细解析
Nov 04 Javascript
jquery引用方法时传递参数原理分析
Oct 13 Javascript
JS实现判断碰撞的方法
Feb 11 Javascript
JavaScript模拟重力状态下抛物运动的方法
Mar 03 Javascript
Clipboard.js 无需Flash的JavaScript复制粘贴库
Oct 02 Javascript
js表单元素checked、radio被选中的几种方法(详解)
Aug 22 Javascript
js实现旋转的星空效果
Nov 01 Javascript
微信小程序实现自定义动画弹框/提示框的方法实例
Nov 06 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读取ACCESS数据到MYSQL的代码
2011/05/11 PHP
php判断终端是手机还是电脑访问网站的思路及代码
2013/04/24 PHP
PHP实现的简单日历类
2014/11/29 PHP
JQuery jsonp 使用示例代码
2009/08/12 Javascript
javascript Array对象基础知识小结
2010/11/16 Javascript
基于jQuery实现的水平和垂直居中的div窗口
2011/08/08 Javascript
通过js动态操作table(新增,删除相关列信息)
2012/05/23 Javascript
Jquery使用Firefox FireBug插件调试Ajax步骤讲解
2013/12/02 Javascript
原生JavaScript实现动态省市县三级联动下拉框菜单实例代码
2016/02/03 Javascript
javascript实现文字无缝滚动
2016/12/27 Javascript
基于nodejs+express4.X实现文件下载的实例代码
2017/07/13 NodeJs
微信小程序progress组件使用详解
2018/01/31 Javascript
详解Node.js使用token进行认证的简单示例
2020/05/25 Javascript
Nuxt 项目性能优化调研分析
2020/11/07 Javascript
基于Vue2实现移动端图片上传、压缩、拖拽排序、拖拽删除功能
2021/01/05 Vue.js
Python实现栈的方法
2015/05/26 Python
Python基于Tkinter的HelloWorld入门实例
2015/06/17 Python
深入理解python函数递归和生成器
2016/06/06 Python
Python判断一个文件夹内哪些文件是图片的实例
2018/12/07 Python
对Python生成汉字字库文字,以及转换为文字图片的实例详解
2019/01/29 Python
基于python实现计算且附带进度条代码实例
2020/03/31 Python
Python xml、字典、json、类四种数据类型如何实现互相转换
2020/05/27 Python
tensorflow使用CNN分析mnist手写体数字数据集
2020/06/17 Python
详解HTML5常用的语义化标签
2019/09/27 HTML / CSS
全球性的在线商店:Vogca
2019/05/10 全球购物
屈臣氏菲律宾官网:Watsons菲律宾
2020/06/30 全球购物
linux面试相关问题
2013/04/28 面试题
工艺员岗位职责
2014/02/11 职场文书
入党推优材料
2014/06/02 职场文书
法语专业求职信
2014/07/20 职场文书
四风问题查摆材料
2014/08/25 职场文书
群众路线党员个人剖析材料
2014/10/08 职场文书
爱国主义教育基地观后感
2015/06/18 职场文书
青年教师听课心得体会
2016/01/15 职场文书
win11高清晰音频管理器在哪里?win11找不到高清晰音频管理器解决办法
2022/04/08 数码科技
关于vue-router-link选择样式设置
2022/04/30 Vue.js