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使用过程中需要注意的地方和一些基本语法
Aug 26 Javascript
jQuery中创建实例与原型继承揭秘
Dec 21 Javascript
node.js中的url.resolve方法使用说明
Dec 10 Javascript
jQuery实现鼠标经过提示信息的地图热点效果
Apr 26 Javascript
JavaScript中的Repaint和Reflow用法详解
Jul 27 Javascript
Angular通过angular-cli来搭建web前端项目的方法
Jul 27 Javascript
SelectPage v2.4 发布新增纯下拉列表和关闭分页功能
Sep 07 Javascript
React-intl 实现多语言的示例代码
Nov 03 Javascript
easyui下拉框动态级联加载的示例代码
Nov 29 Javascript
微信小程序实现文字从右向左无限滚动
Nov 18 Javascript
Vue中通过Vue.extend动态创建实例的方法
Aug 13 Javascript
解决layui轮播图有数据不显示的情况
Sep 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中使用Oracle数据库(3)
2006/10/09 PHP
PHP 的 __FILE__ 常量
2007/01/15 PHP
Erlang的运算符(比较运算符,数值运算符,移位运算符,逻辑运算符)
2012/07/23 PHP
PHP 自定义错误处理函数的使用详解
2013/05/10 PHP
JS之小练习代码
2008/10/12 Javascript
jQuery拖拽 & 弹出层 介绍与示例
2013/12/27 Javascript
innerHTML中标签可以换行的方法汇总
2015/08/14 Javascript
Jquery AJAX POST与GET之间的区别详细介绍
2016/10/17 Javascript
BootStrap Table 获取同行不同列元素的方法
2016/12/19 Javascript
详解Javascript百度地图接口开发文档中的类和方法
2017/02/07 Javascript
利用Plupload.js解决大文件上传问题, 带进度条和背景遮罩层
2017/03/15 Javascript
关于echarts在节点显示动态数据及添加提示文本所遇到的问题
2018/04/20 Javascript
VUE+Element环境搭建与安装的方法步骤
2019/01/24 Javascript
JavaScript实现的弹出遮罩层特效经典示例【基于jQuery】
2019/07/10 jQuery
微信小程序用canvas画图并分享
2020/03/09 Javascript
Angular短信模板校验代码
2020/09/23 Javascript
js实现石头剪刀布游戏
2020/10/11 Javascript
Python类的多重继承问题深入分析
2014/11/09 Python
python中使用序列的方法
2015/08/03 Python
python 计算两个日期相差多少个月实例代码
2017/05/24 Python
简单实现Python爬取网络图片
2018/04/01 Python
Python实现FTP文件传输的实例
2019/07/07 Python
python 串口读取+存储+输出处理实例
2019/12/26 Python
pytorch实现从本地加载 .pth 格式模型
2020/02/14 Python
django 数据库 get_or_create函数返回值是tuple的问题
2020/05/15 Python
全球最大的跑步用品商店:Road Runner Sports
2016/09/11 全球购物
阿迪达斯法国官方网站:adidas法国
2018/03/20 全球购物
The Outnet亚太地区:折扣设计师时装店
2019/12/05 全球购物
自荐信需注意事项
2014/01/25 职场文书
实习会计求职自荐信范文
2014/03/10 职场文书
无偿献血倡议书
2014/04/14 职场文书
百日安全活动总结
2014/05/04 职场文书
离婚财产处理协议书
2014/09/30 职场文书
如何写好开幕词?
2019/06/24 职场文书
Mysql数据库事务的脏读幻读及不可重复读详解
2022/05/30 MySQL
Spring Cloud OAuth2实现自定义token返回格式
2022/06/25 Java/Android