1.轻度监视

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></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(){

                alert('发生变化了');  

                this.b=this.a+100;

            });  

            document.onclick=function(){

                vm.a=1;

            };

        };  

    </script>

</head>

<body>

    <div id="box">

        {{a}}

        <br>

        {{b}}

    </div>  

</body>

</html>

初始状态：

点击完后：

2.深度监视：deep:true

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></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:{

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

                    b:2

                }

            });  

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

                alert('发生变化了');

            },{deep:true});  

            document.onclick=function(){

                vm.json.name='aaa';

            };

        };  

    </script>

</head>

<body>

    <div id="box">

        {{json | json}}

        <br>

        {{b}}

    </div>  

</body>

</html>

Vue之监听数据变化的更多相关文章

  1. vue中监听数据变化 watch

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

  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. $scope.$watch()——监听数据变化

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

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

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

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

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

  8. Vue中使用watch来监听数据变化

    写法一: methods:{ //监听isMD upProp(){ if(this.isMD){//如果isMD等于true 就把storeManagerName赋值给isStoreManagerNa ...

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

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

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

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

随机推荐

  1. H5 WebGL实现水波特效

    前言 零几年刚开始玩电脑的时候,经常在安装程序上看到一种水波特效,鼠标划过去的时候,就像用手在水面划过一样,感觉特别有意思.但是后来,就慢慢很少见过这种特效了.最近突然又想起了这种特效,于是开始折磨怎 ...

  2. 零基础实现Java直播（一）：集成

    从泛娱乐的秀场直播,到直播带货潮流中的电商直播,直播已经成为2020年最热的应用技术之一,越来越多的产品希望加入直播功能.下面我们基于即构Express Video SDK,来分享如何从零实现线上直播 ...

  3. Hugging News #0717: 开源大模型榜单更新、音频 Transformers 课程完成发布！

    每一周,我们的同事都会向社区的成员们发布一些关于 Hugging Face 相关的更新,包括我们的产品和平台更新.社区活动.学习资源和内容更新.开源库和模型更新等,我们将其称之为「Hugging Ne ...

  4. .NET周刊【7月第3期 2023-07-16】

    国内文章 揭秘 .NET 中的 TimerQueue(上) https://www.cnblogs.com/eventhorizon/p/17557821.html TimerQueue 是.NET中 ...

  5. 语音合成技术汇总1：Glow-TTS：通过单调对齐实现文本到语音的生成流

    今天开始开一期语音合成经典论文的翻译 Glow-TTS:通过单调对齐实现文本到语音的生成流 摘要: 最近,文本到语音(Text-to-Speech,TTS)模型,如FastSpeech和ParaNet ...

  6. Bug_ku source (WEB) wp

    在源代码中注释中发现了flag,提交发现是假的. 我们打开kali用dirserch扫描一下网站后台目录吧 发现.git ,这题应该是一个git泄露的题,用wget吧文件下载到本地,-r 选项的作用是 ...

  7. Could not extract response: no suitable `HttpMessageConverter` found for response type [class wechat.xx] and content type [text/plain] 问题

    1. 问题复现 话不多说,先贴出问题代码:这里的GetUserInfoByAccessToken是我自定义的一个实体类. GetUserInfoByAccessToken getUserInfoByA ...

  8. HTML5CSS3基础

    目录 HTML5CSS3基础 1 2D 转换 1.1 二维坐标系 1.2 2D 转换之移动 translate 1.3 2D 转换之旋转 rotate 1.4 2D 转换中心点 transform-o ...

  9. CSS基础（4）

    目录 1 定位 1.1 为什么需要定位 1.2 定位组成 1.2.1 边偏移(方位名词) 1.2.2 定位模式 (position) 1.3 定位模式介绍 1.3.1 静态定位(static) - 了 ...

  10. Linux cpu 亲缘性 绑核

    前言 https://www.cnblogs.com/studywithallofyou/p/17435497.html https://www.cnblogs.com/studywithallofy ...