<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>智能社——http://www.zhinengshe.com</title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

    <meta name="apple-mobile-web-app-capable" content="yes">

    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <style>

    </style>

    <script src="vue.js"></script>

    <script>

        window.onload=function(){

            var vm=new Vue({

                el:'#box',

                data:{

                    a:111,

                    b:2

                }

            });

            vm.$watch('a',function(){//监听器，a是监听哪个属性变化，

                alert('发生变化了');

                this.b=this.a+100;

            });

            document.onclick=function(){

                vm.a=1;

            };

        };

    </script>

</head>

<body>

    <div id="box">

        {{a}}

        <br>

        {{b}}

    </div>

</body>

</html>
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>智能社——http://www.zhinengshe.com</title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

    <meta name="apple-mobile-web-app-capable" content="yes">

    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <style>

    </style>

    <script src="vue.js"></script>

    <script>

        window.onload=function(){

            var vm=new Vue({

                el:'#box',

                data:{

                    aajson:{name:'strive',age:16},

                    b:2

                }

            });

            vm.$watch('aajson',function(){//不能监听json

                alert('发生变化了');

            });

            document.onclick=function(){

                vm.aajson.name='aaa';

            };

        };

    </script>

</head>

<body>

    <div id="box">

        {{aajson | json}}  <!-- 后面的json是解析成json字符串 -->

        <br>

        {{b}}

    </div>

</body>

</html>
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>智能社——http://www.zhinengshe.com</title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

    <meta name="apple-mobile-web-app-capable" content="yes">

    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <style>

    </style>

    <script src="vue.js"></script>

    <script>

        window.onload=function(){

            var vm=new Vue({

                el:'#box',

                data:{

                    ajson:{name:'strive',age:16},

                    b:2

                }

            });

            vm.$watch('ajson',function(){

                alert('发生变化了');

            },{deep:true});

            document.onclick=function(){

                vm.ajson.name='aaa';

            };

        };

    </script>

</head>

<body>

    <div id="box">

        {{ajson | json}}

        <br>

        {{b}}

    </div>

</body>

</html>

vue17 $watch 监听数据变化的更多相关文章

  1. $scope.$watch()——监听数据变化

    $scope.$watch(watchFn, watchAction, [deepWatch]):监听数据变化,三个参数 --watchFn:监听的对象,一个带有Angular 表达式或者函数的字符串 ...

  2. vue.js之过滤器，自定义指令，自定义键盘信息以及监听数据变化

    一.监听数据变化 1.监听数据变化有两种,深度和浅度,形式如下: vm.$watch(name,fnCb); //浅度 vm.$watch(name,fnCb,{deep:true}); //深度监视 ...

  3. vue教程2-08 自定义键盘信息、监听数据变化vm.$watch

    vue教程2-08 自定义键盘信息 @keydown.up @keydown.enter @keydown.a/b/c.... 自定义键盘信息: Vue.directive('on').keyCode ...

  4. 关于微信小程序使用watch监听数据变化的方法

    众所周知,Vue中,可以使用监听属性 watch来观察和响应 Vue 实例上的数据变化,那么小程序能不能实现这一点呢? 监听器的原理,是将data中需监听的数据写在watch对象中,并给其提供一个方法 ...

  5. $watch监听数据变化和run方法

    angular中$watch方法可以监听数据的变化. $scope.$watch('phone',function(){ $scope.phone.fre = $scope.phone.num> ...

  6. mvc 缓存 sqlCacheDependency 监听数据变化

    mvc 缓存   对于MVC有Control缓存和Action缓存. 一.Control缓存 Control缓存即是把缓存应用到整个Control上,该Control下的所有Action都会被缓存起来 ...

  7. ZooKeeper 笔记(2) 监听数据变化

    ZK中的每个节点都可以存储一些轻量级的数据,这些数据的变化会同步到集群中的其它机器.在应用中程序员可以添加watcher来监听这些数据的变化,watcher只会触发一次,所以触发过后想要继续监听,必须 ...

  8. 微信小程序实现watch属性监听数据变化

    Vue 提供了一种通用的方式来观察和响应 Vue 实例上的数据变动:监听属性 watch. 虽然watch的滥用会导致性能不佳,但在一些情况下我们还是需要watch,使得代码更加简洁.逻辑更加清晰(其 ...

  9. vue中监听数据变化 watch

    今天做项目的时候,子组件中数据(原本固定的数据)需要父组件动态传入,如果一开始初始化用到的数据.但当时还没有获取到,初始化结束就不会更新数据了.只有监听这两个属性,再重新执行初始化. 1.watch是 ...

  10. SQL Server CDC配合Kafka Connect监听数据变化

    写在前面 好久没更新Blog了,从CRUD Boy转型大数据开发,拉宽了不少的知识面,从今年年初开始筹备.组建.招兵买马,到现在稳定开搞中,期间踏过无数的火坑,也许除了这篇还很写上三四篇. 进入主题, ...

随机推荐

  1. while循环,格式化输出%,运算符,数据类型的转换,编码的初识,

    1.内容总览 while循环 格式化输出 运算符 and or not 编码的初识 2. 具体内容 while 循环 where:程序中:你需要重复之前的动作,输入用户名密码时,考虑到while循环. ...

  2. [洛谷P1750]KC喝咖啡

    题目大意:给你n个物品,每个物品有一个价值$v_i$和一个时间$t_i$,要你取m个物品,使得他们的美味度($\frac{\sum v_i}{\sum t_i}$)最大,求这个美味度. 解题思路:由于 ...

  3. C语言数组和指针是不同的

    有一个这样的错误: 在一个文件中定义:int mango[100];  在另一个文件中声明:extern int *mango;  将会产生错误 定义和声明的区别: 在C中,任何对象都有且只有一个定义 ...

  4. Laravel核心解读--ENV的加载和读取

    Laravel在启动时会加载项目中的.env文件.对于应用程序运行的环境来说,不同的环境有不同的配置通常是很有用的. 例如,你可能希望在本地使用测试的Mysql数据库而在上线后希望项目能够自动切换到生 ...

  5. 大O时间复杂度

    大O表示法指出了在最糟情况下的运行时间.比较操作数,指出了算法运行时间的增速 常见的大O运行时间 O(logn):也叫对数时间,包括二分查找 O(n):也叫线性时间,包括简单查找 O(nlogn):包 ...

  6. 紫书 习题 11-9 UVa 12549 （二分图最小点覆盖）

    用到了二分图的一些性质, 最大匹配数=最小点覆盖 貌似在白书上有讲 还不是很懂, 自己看着别人的博客用网络流写了一遍 反正以后学白书应该会系统学二分图的,紫书上没讲深. 目前就这样吧. #includ ...

  7. Java基础学习总结（7）——Object类

    一.Object类介绍 Object类在JAVA里面是一个比较特殊的类,JAVA只支持单继承,子类只能从一个父类来继承,如果父类又是从另外一个父类继承过来,那他也只能有一个父类,父类再有父类,那也只能 ...

  8. HDU——T 2444 The Accomodation of Students

    http://acm.hdu.edu.cn/showproblem.php?pid=2444 Time Limit: 5000/1000 MS (Java/Others)    Memory Limi ...

  9. Qt之图形（组合）

    简述 使用QPainter绘制图形或者图像时,在重叠区域使用组合模式(Composition_mode).在绘图设备上通过组合模式使用QImage时,必须使用Format_ARGB32_Premult ...

  10. 使用sh运行bash脚本的奇怪问题

    在同一个文件夹下有两个脚本.a.sh和b.sh,脚本内容例如以下: a.sh: echo "test for a" source b.sh b.sh: echo "tes ...