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


    data(){
  2. return{
  3. Form:{aaa: '',bbb:''},
  4. value: '',
  5. }
  6. }
  7. computed: {
  8. NewForm() {
  9. return JSON.parse(JSON.stringify(this.Form));
  10. },
  11. },
  12. watch: {
  13. NewForm: {
  14. handler(newVal, oldVal) {
  15. console.log('旧值:',oldVal);
  16. console.log('新值:',newVal);
  17. },
  18. deep: true, //深度监听(可监听到对象、数组的变化)
  19. },
  20. value(newVal,oldVal) {
  21. console.log('旧值:',oldVal);
  22. console.log('新值:',newVal);
  23. }
  24. }

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. 代码随想录算法训练营day20 | leetcode ● 654.最大二叉树 ● 617.合并二叉树 ● 700.二叉搜索树中的搜索 ● 98.验证二叉搜索树

    LeetCode 654.最大二叉树 分析1.0 if(start == end) return节点索引 locateMaxNode(arr,start,end) new root = 最大索引对应节 ...

  2. Python批量绘制遥感影像数据的直方图

      本文介绍基于Python中gdal模块,实现对大量栅格图像批量绘制直方图的方法.   首先,明确一下本文需要实现的需求:现需对多幅栅格数据文件进行依据其像元数值的直方图绘制,具体绘制内容即各栅格图 ...

  3. MyBatis 查询的条目与预期的不一致

    预期查询的数据条目是 4 条: 但是 MyBatis 查询出来的结果只有 2 条数据: resultMap 开启了 autoMapping 功能,就不需要多余地添加 result.下面是错误的映射操作 ...

  4. mysql 百万计数据导入--Load data infile

    百万计数据导入MySQL时候如果是每条数据都 insert 会很慢 mysql> set global local_infile = 1; mysql> select @@local_in ...

  5. div溢出横向滚动

    需求:div在一行内需要溢出滚动 方案: 1:父类元素需要设置 overflow-x: auto;  //横向方向溢出元素 white-space: nowrap; //溢出的元素不换行 2:子元素需 ...

  6. java开发环境搭建 (JDK卸载与安装、配置)

    一.window系统下java环境搭建 1.卸载JDK 查看安装目录:此电脑 -> 右键选择属性 -> 高级系统设置 -> 环境变量 -> 查看系统变量那一栏中的JAVA_HO ...

  7. vscode 开发c++

    makefile.mk #makefile.mk 公共头文件 ifndef TARGET # /root/make/src/test_include # notdir TARGET:=$(notdir ...

  8. C# DevExpress GridControl下动态创建列的方法

    这里是把在表格中创建控件的方法封装成一个类,然后在创建列的时候实例化"创建控件"的方法 1.在列中使用一些按钮 1 using Common; 2 using DevExpress ...

  9. go语言初记

    快速了解 http://go-tour-zh.appspot.com/welcome/1 (可以需要爬墙) 下面记录下了解go的过程,特别记录下与你脑子里原有"观念"不同的地方: ...

  10. rancher 修改域名

    rancher 修改域名 rancher 修改ingress.nginx 对应的域名后 cattle-system 名称空间下的pod 依然是连接旧环境的rancher 域名 解决办法 1. 需要登录 ...