vue:监听数据
1:普通的监听:
data () {
return {
watchNum:1,
}
},
watch: {
watchNum(newValue, oldValue) {
console.log(oldValue)
console.log(newValue)
},
methods:{
watchText(){
this.watchNum = this.watchNum +1;
},
}
2:对象的监听:
data() {
return {
bet: {
pokerState: 53,
pokerHistory: 'local'
}
}
},
watch: {
bet: {
handler(newValue, oldValue) {
console.log(newValue)
},
deep: true
}
}
tips: 只要bet中的属性发生变化(可被监测到的),便会执行handler函数;
如果想监测具体的属性变化,如pokerHistory变化时,才执行handler函数,则可以利用计算属性computed做中间层。
事例如下:
3.对象具体属性的watch:
data() {
return {
bet: {
pokerState: 53,
pokerHistory: 'local'
}
}
},
computed: {
pokerHistory() {
return this.bet.pokerHistory
}
},
watch: {
pokerHistory(newValue, oldValue) {
console.log(newValue)
}
}
vue:监听数据的更多相关文章
- 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 ...
- vue 监听对象里的特定数据
vue 监听对象里的特定数据变化 通常是这样写的,只能监听某一个特定数据 watch: { params: function(val) { console.log(val) this.$ajax.g ...
- Vue跨路由触发事件,Vue监听sessionStorage
近来,在做公司的聊天系统,引用的是极光的api.项目需求实时监听别人发过来的消息,进行渲染到页面,还有历史记录也要渲染,历史记录和实时聊天记录返回的结构体还不一样,看到需求的我欲哭无泪,首先登录是在首 ...
- vue —— 监听
vue的监听用途很大 比如:通过数据的值的变化,执行某个方法 首先:data中要有个变量初始值 finalTotalAmount的初始值是0 我们想当finalTotalAmount值发生变化时,执行 ...
- 关于微信小程序使用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> ...
- vue监听滚动事件,实现滚动监听
在vue中实现滚动监听和原生js无太大差异,下面是一个简单的demo,可在控制台查看结果 <!DOCTYPE html> <html lang="en"> ...
随机推荐
- centos7.0KVM虚拟化
需要在图形化界面完成实验 查看CPU信息 # cat /proc/cpuinfo centos7默认安装的虚拟化包 # yum list open*tools 如果没安装就安装 #yum instal ...
- Jmeter(二十二)Jmeter-Question之“不同线程组之间传递变量”
Jmeter中增添原件是以线程组为‘基本单位’的,贴张图,显而易见: 测试计划节点下的内容 线程组节点下的内容 因此,变量只能在当前的线程组下进行传递.做个小Demo,立即试试: 测试结论:不同线程组 ...
- [UE4]圆形小地图
一.创建一个名为M_RoundRetainer的材质 二.创建一个名为RoundMiniMap的UserWidget 三.TestMiniMap中将添加进来 四.运行游戏
- plugin 看不到update按钮
然后再按一下tab键,焦点就会在 update上了.然后再回车.
- (转)C# BackgroundWorker组件的原理分析
原文地址:http://www.cnblogs.com/chaosimple/archive/2012/11/30/2796069.html 主要属性: 1.CancellationPending 获 ...
- 图片路径中含有中文在jsp下不能正常显示的问题
图片路径中含有中文在jsp下不能正常显示的问题~ 这里其实涉及到get请求编码和url编码的问题. jsp页面: 当路径中存在中文的时候,最简单的解决办法是改变tomcat的编码: 在conf/ser ...
- Java 11 - Java String类
Java String类 字符串广泛应用在Java编程中,在Java中字符串属于对象,Java提供了String类来创建和操作字符串. 创建字符串 创建字符串最简单的方式如下: String gree ...
- solr 打分和排序机制(转载)
以下来自solr in action. 包含: 词项频次.查询词项出现在当前查询文档中的次数. 反向文档频次.查询词项出现在所有文档总的次数. 此项权重. 标准化因子: 字段规范: 文档权重. 字段权 ...
- SP694 DISUBSTR - Distinct Substrings
/* 统计每个节点的max和min, 然后求和即可 min = max[fa] + 1 */ #include<cstdio> #include<algorithm> #inc ...
- 数组转换成json key-value形式
eg1(数组中包含的是数组): var jsonData = {}; var arr = [[1, 'boy', 'dabing'], [2, 'girl', 'dabing']]; for (var ...