<!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. Mybatis传递多个参数的解决办法(三种)

    第一种方案 DAO层的函数方法 Public User selectUser(String name,String area); 对应的Mapper.xml <select id="s ...

  2. 洛谷2114 bzoj3668[NOI2014]起床困难综合症

    题目描述 21世纪,许多人得了一种奇怪的病:起床困难综合症,其临床表现为:起床难,起床后精神不佳.作为一名青春阳光好少年,atm一直坚持与起床困难综合症作斗争.通过研究相关文献,他找到了该病的发病原因 ...

  3. 入门python:《Python编程快速上手让繁琐工作自动化》中英文PDF+代码

    入门推荐学习<python编程快速上手>前6章是python的基础知识,通俗易懂地讲解基础,初学者容易犯错的地方,都会指出来.从第三章开始,每章都有一个实践项目,用来巩固前面所学的知识. ...

  4. sqlmap 实战漏洞平台dvwa进行密码破解

    2016-05-24 (1)实验的具体的环境极其思路 首先我们要检测我们的漏洞平台是否有sql注入 ,进行简单的测试发现在用户userid 上存在注入的漏洞 使用抓包工具对其cookie 进行获取如下 ...

  5. 总结使人进步,可视化界面GUI应用开发总结：Android、iOS、Web、Swing、Windows开发等

    可视化界面的软件,是21世纪最主流的应用类型了,黑屏控制台的不适合普通用户.   2004年左右的时候,作为普通网民,接触的自然是可视化,准确是Windows那一套.   那个时候,Microsoft ...

  6. python 中进制转换及format()，int()函数用法

    python中数值型变量好像只能是十进制形式表示,其他类型变量只能以字符串形式存在,可以通过format函数将int类型变量转换成其他进制字符串,如下所示: v_code=15 # 2进制 x=for ...

  7. Mysql学习总结（24）——MySQL多表查询合并结果和内连接查询

    1.使用union和union all合并两个查询结果:select 字段名 from tablename1 union select 字段名 from tablename2: 注意这个操作必须保证两 ...

  8. 逆向project第003篇：跨越CM4验证机制的鸿沟（上）

    一.前言 <冠军足球经理>系列作为一款拟真度极高的足球经营类游戏.赢得过无数赞誉,而CM4可以说是这个传奇的起点. 可是在游戏安装过程中.当用户输入完序列号之后.程序并不会对用户的输入进行 ...

  9. oracle 登录

    命令行登录 sql plus登录 plsql登录 自己电脑登录 既然是登录自己电脑的数据库,肯定是已经安装过了oralce,而且已经创建了数据库等等. 局域网登录 1.必须安装oracleclient ...

  10. Windows下从源代码编译Skia

    在PPAPI里面画图,能够结合第三方的图形库.比方Cairo.Skia. Google Chrome.Chromium和Android都使用Skia作为画图引擎.我也来试试Skia,先过编译关. fo ...