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"> ...
随机推荐
- json--处理框架
1.Android 中的Json解析工具fastjson .序列化.反序列化 2.Android Gson的使用总结 可以处理含有内部类的类,或包含集合内部类的类: 3.Android-JSONToo ...
- [UE4]扔枪
1.把枪Detach掉:DetachFromActor 3个都选择“Keep World” 2.模拟物理 3.给一个向前的速度 4.切枪,到上一个武器,或者捡起脚底下的武器 注意Get Compone ...
- 工作T-SQL备忘
作为一个"浸淫" Oracle 数据库很久的人来说, 突然转入 T-SQL, 也就是 MSSQL , 工作中经常用的查询和 MSMS 使用备忘如下 : --1. 切换对应的库连接 ...
- [TFS]TFS强制删除离职人员签出锁定项的方法
步骤: 1.连接到TFS数据库服务器的tfsversioncontrol库: 2.查tbl_workspace表,找出那哥们的工作目录, 如select * from tbl_workspace wh ...
- Delphi如何找到出错行的行数!!
Delphi之通过崩溃地址找出源代码的出错行 一 什么是MAP文件 什么是 MAP 文件?简单地讲, MAP 文件是程序的全局符号.源文件和代码行号信息的唯一的文本表示方法,它可以在任何地方.任何时候 ...
- Chapter3:Qt5布局管理
3.1分割窗口QSplitter类 QSplitter *splitterMain = new QSplitter(Qt::Horizontal,0); QTextEdit *textLeft = n ...
- IIS 禁止回收
在IIS中找到这个站点所用的程序池,点击“高级设置...” 在打开的列表中更改以下设置: 回收 ——固定时间间隔(分钟) 改为 0 ——虚拟/专用内存限制(KB) 改为 0 进程模型 ——闲置超时(分 ...
- MySQL查询表的所有列名,用逗号拼接
问题场景 在MySQL中,需要以逗号拼接一个表的所有字段 sql语句 SELECT GROUP_CONCAT(COLUMN_NAME SEPARATOR ",") FROM inf ...
- servlet为什么会出现?servlet有什么作用?
在面试中遇到了这个问题,所以想总结一下,所以上网找了一下,主要是网上的一些我觉得比较合理的解释: servlet为什么会出现? Servlet = Service + Applet,表示小服务程序.S ...
- 《Linux性能及调优指南》1.3 Linux文件系统
翻译:飞哥 (http://hi.baidu.com/imlidapeng) 版权所有,尊重他人劳动成果,转载时请注明作者和原始出处及本声明. 原文名称:<Linux Performance a ...