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 相关文章推荐
快速保存网页中所有图片的方法
Jun 23 Javascript
关于IE BUG与字符串截取substr的解决办法
Apr 10 Javascript
angularjs实现与服务器交互分享
Jun 24 Javascript
jQuery中focus事件用法实例
Dec 26 Javascript
JavaScript中创建对象的模式汇总
Apr 19 Javascript
js验证框架实现代码分享
May 18 Javascript
JS基于onclick事件实现单个按钮的编辑与保存功能示例
Feb 13 Javascript
vue组件实践之可搜索下拉框功能
Nov 25 Javascript
mongodb初始化并使用node.js实现mongodb操作封装方法
Apr 02 Javascript
js实现随机点名程序
Sep 17 Javascript
使用AutoJs实现微信抢红包的代码
Dec 31 Javascript
vue实现同时设置多个倒计时
May 20 Vue.js
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的可变变量名需要的注意的问题
2013/06/20 PHP
PHP中array_keys和array_unique函数源码的分析
2016/02/26 PHP
PHP定时任务获取微信access_token的方法
2016/10/10 PHP
Laravel实现autoload方法详解
2017/05/07 PHP
Docker搭建自己的PHP开发环境
2018/02/24 PHP
jquery focus(fn),blur(fn)方法实例代码
2011/12/16 Javascript
javascript 基础篇2 数据类型,语句,函数
2012/03/14 Javascript
js对象转json数组的简单实现案例
2014/02/28 Javascript
轻松创建nodejs服务器(10):处理POST请求
2014/12/18 NodeJs
了不起的node.js读书笔记之mongodb数据库交互
2014/12/22 Javascript
IE6-IE9使用JSON、table.innerHTML所引发的问题
2015/12/22 Javascript
20分钟成功编写bootstrap响应式页面 就这么简单
2016/05/12 Javascript
基于jQuery的ajax方法封装
2016/07/14 Javascript
JavaScript浮点数及运算精度调整详解
2016/10/21 Javascript
ionic进入多级目录后隐藏底部导航栏(tabs)的完美解决方案
2016/11/23 Javascript
详解Vue用axios发送post请求自动set cookie
2017/05/10 Javascript
详解解决使用axios发送json后台接收不到的问题
2018/06/27 Javascript
vue cli 3.0 搭建项目的图文教程
2019/05/17 Javascript
使用Angular material主题定义自己的组件库的配色体系
2019/09/04 Javascript
[02:06]DOTA2肉山黑名单魔法终结者 敌法师中文配音鉴赏
2013/06/17 DOTA
Python程序设计入门(3)数组的使用
2014/06/16 Python
基于python(urlparse)模板的使用方法总结
2017/10/13 Python
python入门教程 python入门神图一张
2018/03/05 Python
python学生信息管理系统
2018/03/13 Python
浅谈Python的方法解析顺序(MRO)
2020/03/05 Python
html5中valid、invalid、required的定义
2014/02/21 HTML / CSS
Forever 21美国官网:美国标志性快时尚品牌
2017/02/20 全球购物
诺思信科技(南京)有限公司.NET笔试题答案
2013/07/06 面试题
施工人员岗位职责
2013/12/12 职场文书
网上书店创业计划书
2014/01/12 职场文书
国际商贸专业自荐信
2014/06/09 职场文书
专业技术人员年度考核评语
2014/12/31 职场文书
科技活动总结范文
2015/05/11 职场文书
征求意见函
2015/06/05 职场文书
python glom模块的使用简介
2021/04/13 Python
javascript进阶篇深拷贝实现的四种方式
2022/07/07 Javascript