直接看下面代码:
  1.红色的的为一个对象,watch监听时。需要借助 computed 属性,否则watch监听打印出来的新旧值看不出。(注:方法可以随便写,但是 computed 中 与 watch的名字要一致,且computed中必须return返回值。)
2.蓝色的的为一个普通的变量,watch监听获取它的新旧值时,直接在watch中书写即可。(注:名字必须为 要监听的 变量名字)


data(){
return{
Form:{aaa: '',bbb:''},
value: '',
}
} computed: {
NewForm() {
return JSON.parse(JSON.stringify(this.Form));
},
},
watch: {
NewForm: {
handler(newVal, oldVal) {
console.log('旧值:',oldVal);
console.log('新值:',newVal);
},
deep: true, //深度监听(可监听到对象、数组的变化)
},
value(newVal,oldVal) {
console.log('旧值:',oldVal);
console.log('新值:',newVal);
}
}

Vue watch监听 date中的变量 与 数组或者对象的数据变化的更多相关文章

  1. Javascript中判断变量是数组还是对象(array还是object)

    怎样判断一个JavaScript变量是array还是obiect? 答案: 1.如果你只是用typeof来检查该变量,不论是array还是object,都将返回‘objec'. 此问题的一个可行的答案 ...

  2. js 中判断变量是数组还是对象,和判断对象是否为空

    判断是对象还是数组  var ids={ id:'1',num:'2' } if(Array.isArray(ids) == false) {console.log('不是数组,对象') } else ...

  3. 9.Vue.js 监听属性

    本章节,我们将为大家介绍 Vue.js 监听属性 watch,我们可以通过 watch 来响应数据的变化. 以下实例通过使用 watch 实现计数器: <div id = "app&q ...

  4. 设计模式(5): vue 不监听绑定的变量

    概述 最近最近做项目的时候总会思考一些大的应用设计模式相关的问题,我把自己的思考记录下来,供以后开发时参考,相信对其他人也有用. 绑定变量 一般情况下,如果我们需要在组件中使用某个变量,会这么使用: ...

  5. vue时时监听input输入框中 输入内容 写法

    Vue input 监听 使用 v-on:input="change" 实现即可 App.vue <template> <div> <md-field ...

  6. Fragment-如何监听fragment中的回退事件与怎样保存fragment状态

    一.如何监听Fragment中的回退事件 1.问题阐述 在Activity中监听回退事件是件非常容易的事,因为直接重写onBackPressed()函数就好了,但当大家想要监听Fragment中的回退 ...

  7. Spring Boot 监听 Activemq 中的特定 topic ,并将数据通过 RabbitMq 发布出去

    1.Spring Boot 和 ActiveMQ .RabbitMQ 简介 最近因为公司的项目需要用到 Spring Boot , 所以自学了一下, 发现它与 Spring 相比,最大的优点就是减少了 ...

  8. Vue 事件监听实现导航栏吸顶效果(页面滚动后定位)

    Vue 事件监听实现导航栏吸顶效果(页面滚动后定位) Howie126313 关注 2017.11.19 15:05* 字数 100 阅读 3154评论 0喜欢 0 所说的吸顶效果就是在页面没有滑动之 ...

  9. js 实时监听input中值变化

    注意:用到了jquery需要引入jquery.min.js. 需求: 1.每个地方需要分别打分,总分为100; 2.第一个打分总分为40; 3.第二个打分总分为60. 注意:需要判断null.&quo ...

  10. ASP.NET Core 发布之后通过命令控制监听地址和环境变量

    添加Command支持 新建一个ASP.NET Core 项目,打开Program.cs 添加下面的代码: public class Program { public static void Main ...

随机推荐

  1. JZOJ 4212. 【五校联考1day2】我想大声告诉你

    题目 解析 设 \(f_{i,j}\) 表示 \(i+1..n\) 个人能受到 \(j\) 次攻击的概率 因为选人出局的顺序是无所谓的,所以我们设从 \(1..n\) 依次选人出局 那么转移时需要分类 ...

  2. C#本地时间转Unix时间

    获取Unix时间最高效的方法 /// <summary> /// 扩展方法, 本地时间转Unix时间; (如 本地时间 "2020-01-01 20:20:10" 转换 ...

  3. 批量下载Landsat遥感影像的方法

      本文介绍在USGS网站批量下载Landsat系列遥感影像的方法.   首先,打开EarthExplorer的官网,首先完成注册与登录.   接下来,点击左侧"Search Criteri ...

  4. form表单enctype扩展

    enctype就是encodetype就是编码类型的意思. multipart/form-data是指表单数据有多部分构成,既有文本数据,又有文件等二进制数据的意思. 需要注意的是:默认情况下,enc ...

  5. 【redis】配置优化及从库优先级

    https://blog.51cto.com/u_15902893/5912902 vim /etc/redis/redis.conf ##################基础############ ...

  6. springboot AOP配置

    在Springboot中添加AOP配置分两步: 最近学习AOP ,记录一下,虽然很多名字不太清楚,但是问题不大 1:在pom.xml中添加AOP依赖 2:建一个AOP配置类 下面来看下代码是怎么实现的 ...

  7. js开发环境如何解决跨域问题

    问题 npm start之后,自己会启动一个端口,比如3000,调用后端服务(比如localhsot:3006/service/list)就会出现跨域,那怎么弄呢? 方式一: webpack设置pro ...

  8. CodeGym自学笔记03——变量、数据类型

    变量 变量是用来存储数据的特殊实体. 1.在 Java 语言中,所有数据都存储在变量中. 2.最接近的比喻就好比是一个盒子. 3.在 Java 语言中,每个变量都有三个重要的属性:类型.名称和值. - ...

  9. wget 和 curl的区别

    原文 https://www.codenong.com/s1190000022301195/ https://geek-docs.com/linux/linux-ask-answer/differen ...

  10. The table‘xxxx’is full

    df -h 查看磁盘 设置 back_log = 50 接受队列,对于没建立 tcp 连接的请求队列放入缓存中,队列大小为 back_log,受限制与 OS 参数,试图设定 back_log 高于你的 ...