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 相关文章推荐
ExtJS 下拉多选框lovcombo
May 19 Javascript
javascript中类的定义及其方式(《javascript高级程序设计》学习笔记)
Jul 04 Javascript
js实现的GridView即表头固定表体有滚动条且可滚动
Feb 19 Javascript
使用jspdf生成pdf报表
Jul 03 Javascript
JSONObject使用方法详解
Dec 17 Javascript
Angularjs在初始化未完毕时出现闪烁问题的解决方法分析
Aug 05 Javascript
深入理解jquery中的each用法
Dec 14 Javascript
jQuery布局组件EasyUI Layout使用方法详解
Feb 28 Javascript
angular4 JavaScript内存溢出问题
Mar 06 Javascript
H5+C3+JS实现双人对战五子棋游戏(UI篇)
May 28 Javascript
vue实现重置表单信息为空的方法
Sep 29 Javascript
JS学习笔记之闭包小案例分析
May 29 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
Android ProgressBar进度条和ProgressDialog进度框的展示DEMO
2013/06/19 PHP
获取任意Html元素与body之间的偏移距离 offsetTop、offsetLeft (For:IE5+ FF1 )[
2006/12/22 Javascript
基于jQuery的实现简单的分页控件
2010/10/10 Javascript
解决jquery的datepicker的本地化以及Today问题
2012/05/23 Javascript
Jquery Uploadify多文件上传带进度条且传递自己的参数
2013/08/28 Javascript
js+cookies实现悬浮购物车的方法
2015/05/25 Javascript
JS数组array元素的添加和删除方法代码实例
2015/06/01 Javascript
基于jquery实现表格内容筛选功能实例解析
2016/05/09 Javascript
jquery获取复选框的值的简单实例
2016/05/26 Javascript
深入浅析JS的数组遍历方法(推荐)
2016/06/15 Javascript
浅谈jQuery效果函数
2016/09/16 Javascript
Bootstrap模态框调用功能实现方法
2016/09/19 Javascript
js窗口震动小程序分享
2016/11/28 Javascript
jquery uploadify隐藏上传进度的实现方法
2017/02/06 Javascript
JavaScript函数apply()和call()用法与异同分析
2018/08/10 Javascript
详解Angular6学习笔记之主从组件
2018/09/05 Javascript
vue-cli3添加模式配置多环境变量的方法
2019/06/05 Javascript
Quasar Input:type="number" 去掉上下小箭头 实现加减按钮样式功能
2020/04/09 Javascript
[54:53]完美世界DOTA2联赛PWL S2 GXR vs PXG 第二场 11.18
2020/11/18 DOTA
跟老齐学Python之有容乃大的list(3)
2014/09/15 Python
Python爬虫之pandas基本安装与使用方法示例
2018/08/08 Python
django框架使用orm实现批量更新数据的方法
2019/06/21 Python
Django获取该数据的上一条和下一条方法
2019/08/12 Python
Django框架下静态模板的继承操作示例
2019/11/08 Python
centos7中安装python3.6.4的教程
2019/12/11 Python
简单介绍django提供的加密算法
2019/12/18 Python
python 实现分组求和与分组累加求和代码
2020/05/18 Python
纯CSS3实现绘制各种图形实现代码详细整理
2012/12/26 HTML / CSS
HTML5之SVG 2D入门10—滤镜的定义及使用
2013/01/30 HTML / CSS
应届大学生自荐书
2014/06/17 职场文书
2014领导班子四风问题查摆思想汇报
2014/09/13 职场文书
稽核岗位职责
2015/02/10 职场文书
董事长助理岗位职责
2015/02/11 职场文书
新闻稿件写作范文
2015/07/18 职场文书
2017寒假社会实践心得体会范文
2016/01/14 职场文书
golang连接MySQl使用sqlx库
2022/04/14 Golang