watch:
观测Vue实例上的数据变动,对应一个对象,
键:就是需要监测的那个东西,
值:

1.可以是当键变化时执行的函数,有两个参数,第一个是变化前的值,第二个是变化后的值。
2.可以是函数名,得用单引号包裹。
3.可以是一个对象,这个对象有三个选项:
(1)handler :一个回调函数,监听到变化时应该执行的函数。
(2)deep :boolean值,是否深度监听。(一般监听时是不能监听到对象属性值的变化的,数组的变化可以听到)
(3)immediate :boolean值,是否立即执行handler函数。

watch的三种情况:
1. 普通的watch:

  el:'#app',

    data:{

        meter:1000,

        kilameter:1

    },

    watch:{

        meter:function(val){

            this.kilameter = val * 0.1;

        },

        kilameter:function(val){

            this.meter = val *1000;

        }

    }

})

2.数组的watch:

    el:'#app',

    data:{

        arr:[1,2,3]

    },

    watch:{

        arr:function(oldV,newV){

            console.log(oldV);

            console.log(newV);     

        }

    }

})

3.对象的watch:

    el:'#app',

    data:{

        obj : {

            a:111,

            b:222

        }  

    },

    watch:{

        obj:{

            handler:function(oldV,newV){

                console.log(oldV);

            },

            deep:true

        }

    }

)

vue2.0中watch用法的更多相关文章

  1. UICollectionView在Swift3.0中的用法

    UICollectionView在Swift3.0中的用法 UICollectionView的初始化跟OC中是相似的,创建 GameView 集成自 UICollectionView .注意不同于UI ...

  2. Vue2.0中的transition组件

    组件的过度 Vue1.0中transition做为标签的行内属性被vue支持.但在Vue2.0中.Vue放弃了旧属性的支持并提供了transition组件,transition做为标签被使用. 使用t ...

  3. router-view在vue2.0中不显示,解决方法

    学习的router-view路由一直不显示,我翻看vue文档,花费1个小事终于找到原因,希望我的问题能给初学的同学,带来福音,版本不一样,真的烦 在此总结记录,以免以后在此遇到此问题 //配置路由 c ...

  4. vue2.0中使用pug(jade)

    第一部分:pug(jade)模板引擎 pug,原名jade,是流行的HTML模板引擎,它是HAML在JavaScript上的实现,最大的特色是使用缩进排列替代成对标签. 它简化了HTML的成对标签的写 ...

  5. vue2.0中使用less

    第一部分:Less语言 与上一篇<vue2.0中使用sass>介绍的Sass语言一样,Less语言也是一种CSS的扩展语言,增加了变量.混合(minin).函数等功能,让CSS更易维护.方 ...

  6. vue2.0中使用sass

    第一部分:Sass语言 Sass是一种强大的css扩展语言(css本身并不是一门语言),它允许你使用变量.嵌套规则.mixins.导入等css没有但开发语言(如Java.C#.Ruby等)有的一些特性 ...

  7. vue2.0 中#$emit,$on的使用详解

    vue1.0中 vm.$dispatch 和 vm.$broadcast 被弃用,改用$emit,$on 1. vm.$on( event, callback ) 监听当前实例上的自定义事件.事件可以 ...

  8. Vue2.0中v-for迭代语法变化(key、index)【转】

    转自:http://blog.csdn.net/sinat_35512245/article/details/53966788 Vue2.0的代码中发现 $key这个值并不能渲染成功,问题如下:但是v ...

  9. Vue2.0中的路由配置

    Vue2.0较Vue1.0,路由有了较大改变.看一下Vue2.0中的路由如何配置: 步骤一: 在main.js文件中引入相关模块以及组件及实例化vue对象配置选项路由及渲染App组件 默认设置如下: ...

  10. vue2.0中,由于页面完成之后dom还未加载完成如何进行操作

    再vue中,当页面加载完成以后,dom还没有加载,是无法获取进行操作的,但是在vue2.0中提供了一个方法:this.$nextTick,在这个回调函数里面写dom操作即可: 如下代码: create ...

随机推荐

  1. jQuery 框架

    jQuery 框架 目录 jQuery 框架 一. 概述 二. jQuery 安装引用 2.1 安装 2.2 本地导入使用 2.3 jQuery CDN引入 三. jQuery基本语法 四. 查找标签 ...

  2. coast 海岸 单词记忆方法

    coast 海岸 单词记忆方法 coa 扣 想象一个碗扣下去 st站 碗的边和地面的接触面 就是海岸的边 coast 逼近的地方-海岸 coast (n.) - "margin of the ...

  3. 1.JAVA中的几种基本数据类型是什么,各自占用多少字节

    1.JAVA中的几种基本数据类型是什么,各自占用多少字节 基本类型 大小 最小值 最大值 默认值 byte(位) 8bits = 1字节 -128 127 0 short(短整数) 16bit = 2 ...

  4. Typora自定义主题详解--打造自己的专属样式

    你真的会使用Typora吗? 欢迎关注博主公众号「Java大师」, 专注于分享Java领域干货文章, 关注回复「主题」, 获取大师使用的typora主题: http://www.javaman.cn/ ...

  5. Justep X5 Studio,业界公认第一的快速开发平台

    Justep X5 Studio,业界公认第一的快速开发平台,提供完全可视化.组件化开发环境,具备超强的工作流.组织机构和权限.复杂图表和报表.丰富的业务规则定制能力,以及各种浏览器环境下的复杂业务展 ...

  6. Android中同步类Mutex(AutoMutex)与Condition

    在Android中,封装的同步类主要有Mutex(AutoMutex)与Condition. 这两个类在android中被大量的使用,这也说明这两个类是非常重要的. 一.Mutex(AutoMutex ...

  7. 【STM32F4 HAL】MPU6050食用

    关于MPU6050模块的食用>_<(本人比较菜,写的不好或有错误的地方欢迎大佬指出) 最近学校冬令营发了个MPU6050模块,第一次弄也花了我花了不少时间,于是就把其中一些步骤以及要点简单 ...

  8. 【UE虚幻引擎】手把手教学,UE新手打包全攻略!

    UE虚幻引擎是一款强大的3D实时开发工具,可用于游戏开发.建筑及汽车可视化.影视内容创作.广播及现场活动制作.培训及仿真模拟以及其他实时应用.在UE实际开发过程中,新手工程师可能会遇到总是打包失败的情 ...

  9. 深入分析Java中的PriorityQueue底层实现与源码

    本文分享自华为云社区<滚雪球学Java(70):深入理解Java中的PriorityQueue底层实现与源码分析>,作者: bug菌. 环境说明:Windows 10 + IntelliJ ...

  10. Locust 断言的实现?

    一.检查点的方式有哪些: 主要是python 内置的assert 断言(自动断言)还有locust 中的catch_response 断言(手动断言):那么这两者之间有什么区别呢? 其实主要区别在与生 ...