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只会触发一次,所以触发过后想要继续监听,必须 ...
随机推荐
- Lifecycle解决了什么问题，以及它的基本用法
1.为何要引入Lifecycle? 我首先来举个大家都比较常见的例子:我们在android开发的时候,经常需要在页面的onCreate()方法中对组件进行初始化,在onPause()方法中停止组件,而 ...
- 【WebRtc】获取媒体设备信息
加载设备信息页面 加载完设备信息页面 Code /** * 加载当前设备的音视频信息 */ initInnerLocalDevice() { let that = this; // 判断是否支持 if ...
- MarkdownQuote：简化 Markdown 中的代码引用！
MarkdownQuote:简化 Markdown 中的代码引用! 这是 SourceCodeTrace 项目之一,通过在 IDE 中提供一种便捷的方式,快速复制包含代码来源 Markdown 代码块 ...
- MyBatis 常用工具类
SQL 类 MyBatis 提供了一个 SQL 工具类,使用这个工具类,我们可以很方便在 Java 代码动态构建 SQL 语句 String newSql = new SQL() ({ SELECT( ...
- IIC、SPI、UART三者对比
下面将对比三者的各自差异: 参考资料: 1.(112条消息) UART, SPI, IIC的详解及三者的区别和联系_iic spi uart_静思心远的博客-CSDN博客
- Yunfly 一款高效、性能优异的 node.js web 框架
介绍 Yunfly 一款高性能 Node.js WEB 框架, 使用 Typescript 构建我们的应用. 使用 Koa2 做为 HTTP 底层框架, 使用 routing-controllers ...
- uniapp开发H5，分享链接到微信好友，显示标题和缩略图
本文档介绍了如何在UniApp开发中实现将链接分享到微信好友,并确保在分享时显示标题和缩略图的方法. 背景 第一次用uniapp开发H5页面,发现分享给微信好友的链接,不显示标题和缩略图 步骤一:安装 ...
- 安装部署RabbitMQ
前言 RabbitMQ是一款使用Erlang语言开发,实现AMQP(高级消息队列协议)的开源消息中间件.RabbitMQ的特点: 可靠性.支持持久化,传输确认,发布确认等保证了MQ的可靠性. 灵活的分 ...
- [ABC128D] equeue
2023-01-14 题目 题目传送门 翻译 翻译 难度&重要性(1~10):4 题目来源 AtCoder 题目算法 暴力,贪心 解题思路 由题意可以得出,数据只有 \(n \leq 50,k ...
- 如何正确实现一个自定义 Exception
最近在公司的项目中,编写了几个自定义的 Exception 类.提交 PR 的时候,sonarqube 提示这几个自定义异常不符合 ISerializable patten. 花了点时间稍微研究了一下 ...