vue17 $watch 监听数据变化
<!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 监听数据变化的更多相关文章
- $scope.$watch()——监听数据变化
$scope.$watch(watchFn, watchAction, [deepWatch]):监听数据变化,三个参数 --watchFn:监听的对象,一个带有Angular 表达式或者函数的字符串 ...
- vue.js之过滤器，自定义指令，自定义键盘信息以及监听数据变化
一.监听数据变化 1.监听数据变化有两种,深度和浅度,形式如下: vm.$watch(name,fnCb); //浅度 vm.$watch(name,fnCb,{deep:true}); //深度监视 ...
- vue教程2-08 自定义键盘信息、监听数据变化vm.$watch
vue教程2-08 自定义键盘信息 @keydown.up @keydown.enter @keydown.a/b/c.... 自定义键盘信息: Vue.directive('on').keyCode ...
- 关于微信小程序使用watch监听数据变化的方法
众所周知,Vue中,可以使用监听属性 watch来观察和响应 Vue 实例上的数据变化,那么小程序能不能实现这一点呢? 监听器的原理,是将data中需监听的数据写在watch对象中,并给其提供一个方法 ...
- $watch监听数据变化和run方法
angular中$watch方法可以监听数据的变化. $scope.$watch('phone',function(){ $scope.phone.fre = $scope.phone.num> ...
- mvc 缓存 sqlCacheDependency 监听数据变化
mvc 缓存 对于MVC有Control缓存和Action缓存. 一.Control缓存 Control缓存即是把缓存应用到整个Control上,该Control下的所有Action都会被缓存起来 ...
- ZooKeeper 笔记(2) 监听数据变化
ZK中的每个节点都可以存储一些轻量级的数据,这些数据的变化会同步到集群中的其它机器.在应用中程序员可以添加watcher来监听这些数据的变化,watcher只会触发一次,所以触发过后想要继续监听,必须 ...
- 微信小程序实现watch属性监听数据变化
Vue 提供了一种通用的方式来观察和响应 Vue 实例上的数据变动:监听属性 watch. 虽然watch的滥用会导致性能不佳,但在一些情况下我们还是需要watch,使得代码更加简洁.逻辑更加清晰(其 ...
- vue中监听数据变化 watch
今天做项目的时候,子组件中数据(原本固定的数据)需要父组件动态传入,如果一开始初始化用到的数据.但当时还没有获取到,初始化结束就不会更新数据了.只有监听这两个属性,再重新执行初始化. 1.watch是 ...
- SQL Server CDC配合Kafka Connect监听数据变化
写在前面 好久没更新Blog了,从CRUD Boy转型大数据开发,拉宽了不少的知识面,从今年年初开始筹备.组建.招兵买马,到现在稳定开搞中,期间踏过无数的火坑,也许除了这篇还很写上三四篇. 进入主题, ...
随机推荐
- SpringBoot实战（三）代码热部署
每次代码改动后都需要重新手动Run项目,心累,在网上找了下,发现SpringBoot提供了热部署的方案,改动代码后自动编译打包,现在将热部署的配置方法记下来: 第一步:在pom.xml中添加依赖,导入 ...
- 平凡主丛上的Yang-Mills理论
本文是复旦大学由丁青教授的暑期课程“Yang-Mills理论的几何及其应用”所作笔记,会有少许修正. 所需基础: 多元微积分学 微分方程(常微分方程,数学物理方程) 曲线曲面论(初等微分几何) 以下是 ...
- pythonweb django的学习
Django 环境搭建及创建项目 首先安装django包,我使用的是pycharm,所以直接在IDE中就可以直接安装,但是django还需要手动配置系统变量 找到python根目录下的django文件 ...
- solr在windows下的安装及配置
solr在windows下的安装及配置 首先,solr是基于Java开发的,所以使用的话需要先进行java环境的配置,在Java环境配置好之后就可以去http://www.apache.org/dyn ...
- excle查找操作-vlookup的使用心得
百度了一下vlookup的语法规则: 该函数的语法规则例如以下: VLOOKUP(lookup_value,table_array,col_index_num,range_lookup) 參数 简单说 ...
- bzoj1026: [SCOI2009]windy数（传说你是数位DP）
1026: [SCOI2009]windy数 题目:传送门 题解: 其实之前年少无知的时候好像A过...表示当时并不知道什么数位DP 今天回来深造一发... 其实如果对这个算法稍有了解...看到这题的 ...
- js中如何取精度
js中如何取精度 一.总结 一句话总结:其实round()函数去经度会有误差,直接用num.toFixed(2)简单方便. toFixed()方法会按照指定的小数返回数值的字符串表示.var num ...
- 12.Intellij IDEA 添加jar包的三种方式
转自:https://blog.csdn.net/zwj1030711290/article/details/56678353/ 一.直接复制:(不推荐) 方法:直接将硬盘上的jar包复制粘贴到项目的 ...
- CSS常用原子类base.css
在写css文件时,一些常用的属性我们完全可以把它单独提出来,提高复用性,能增加开发效率,下面是一些网站推荐的常用原子类,也是零度逍遥常用的,规定了一些字体,内外边距和宽高属性,一般写在base.css ...
- Metasploit的攻击实例讲解----ms10_046快捷方式图标漏洞
不多说,直接上干货! 准备工具 1.Kali linux 2016.2(Rolling)系统 IP: 192.168.1.103 2.受害者机子(windows XP系统) IP: 10.10 ...