Vue之监听数据变化
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之监听数据变化的更多相关文章
- vue中监听数据变化 watch
今天做项目的时候,子组件中数据(原本固定的数据)需要父组件动态传入,如果一开始初始化用到的数据.但当时还没有获取到,初始化结束就不会更新数据了.只有监听这两个属性,再重新执行初始化. 1.watch是 ...
- 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对象中,并给其提供一个方法 ...
- $scope.$watch()——监听数据变化
$scope.$watch(watchFn, watchAction, [deepWatch]):监听数据变化,三个参数 --watchFn:监听的对象,一个带有Angular 表达式或者函数的字符串 ...
- $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都会被缓存起来 ...
- Vue中使用watch来监听数据变化
写法一: methods:{ //监听isMD upProp(){ if(this.isMD){//如果isMD等于true 就把storeManagerName赋值给isStoreManagerNa ...
- 微信小程序实现watch属性监听数据变化
Vue 提供了一种通用的方式来观察和响应 Vue 实例上的数据变动:监听属性 watch. 虽然watch的滥用会导致性能不佳,但在一些情况下我们还是需要watch,使得代码更加简洁.逻辑更加清晰(其 ...
- ZooKeeper 笔记(2) 监听数据变化
ZK中的每个节点都可以存储一些轻量级的数据,这些数据的变化会同步到集群中的其它机器.在应用中程序员可以添加watcher来监听这些数据的变化,watcher只会触发一次,所以触发过后想要继续监听,必须 ...
随机推荐
- 我是如何组织 Go 代码的（目录结构 依赖注入 wire）
背景 对于大多数 Gopher 来说,编写 Go 程序会直接在目录建立 main.go,xxx.go,yyy.go-- 不是说不好,对于小型工程来说,简单反而简洁明了,我也提倡小工程没必要整一些花里胡 ...
- 基于 Spark 的物流企业数据仓库 的设计与实现
1.设计和实现了一种基于 Spark 的分布式 ETL 系统,包括利用 Spark 抽取.转换清洗和加载数据的具体过程. 2.设计和实现了基于 Spark 的物流企业数据仓库,包括物流企业数据仓库的分 ...
- 2021-11-30 WPF的MVVM绑定
主页面代码 public partial class MainWindow : Window { MainViewModel mainViewModel = null; public MainWind ...
- CF1855B Longest Divisors Interval 题解
题意: 给定一个数 \(n\),求一个连续区间 \([l,r]\) 使得 \(n\) 是区间内每个数的倍数,最大化这个区间的长度(多组数据). 思路: 逆向思考一波,( 如果一个数 \(x\) 不是 ...
- python教程 入门学习笔记 第4天 数据类型 获取数据类型 字符串拼接
数据类型 1.能直接处理的基本数据类型有5个:整型.浮点型.字符串.布尔值.空 1)整型(int)=整数,例如0至9,-1至-9,100,-8180等,人数.年龄.页码.门牌号等 没有小数位的数字,是 ...
- G-channel 实现低光图像增强
G-channel 之前研究低光图像增强时,看到一篇博客,里面介绍了一种方法,没有说明出处,也没有说明方法的名字,这里暂时叫做 G-channel 算法. 博客地址:低照度图像增强(附步骤及源码)_低 ...
- SpringBoot3集成ElasticSearch
目录 一.简介 二.环境搭建 1.下载安装包 2.服务启动 三.工程搭建 1.工程结构 2.依赖管理 3.配置文件 四.基础用法 1.实体类 2.初始化索引 3.仓储接口 4.查询语法 五.参考源码 ...
- 知识图谱（Knowledge Graph）- Neo4j 5.10.0 使用 - Java SpringBoot 操作 Neo4j
上一篇使用了 CQL 实现了太极拳传承谱,这次使用JAVA SpringBoot 实现,只演示获取信息,源码连接在文章最后 三要素 在知识图谱中,通过三元组 <实体 × 关系 × 属性> ...
- Programming abstractions in C阅读笔记：p130-p131
<Programming Abstractions In C>学习第52天,p130-p131,总结如下: 一.技术总结 1. pig latin game 通过pig latin gam ...
- 《Kali渗透基础》08. 弱点扫描（二）
@ 目录 1:OpenVAS / GVM 1.1:介绍 1.2:安装 1.3:使用 2:Nessus 2.1:介绍 2.2:安装 2.3:使用 3:Nexpose 本系列侧重方法论,各工具只是实现目标 ...