Vue中使用 setTimeout() setInterval()函数的问题


Posted in Javascript onSeptember 13, 2018

在vue点击事件调用函数的过程中,想通过 setTimeout() setInterval()函数来延迟修改参数时,发现函数没有执行,控制台也没有报错,代码如下:

var vm_target = new Vue({
        el: '#vm_target',
        data: {
          clickSubmitBtn:false
        },
        methods:{
          myFunc:function(){
            setTimeout(function(){
            this.clickSubmitBtn = true; //此处修改data中的参数时无效
            },500);
          }
        }
       })

 之后在调试的时候,发现,setTimeout()函数中的 this 指向的并非vue对象,将this.clickSubmitBtn = true; 修改为 vm_target.clickSubmitBtn = true;之后 ,代码便可以正常执行。

var vm_target = new Vue({
        el: '#vm_target',
        data: {
          clickSubmitBtn:false
        },
        methods:{
          myFunc:function(){
            setTimeout(function(){
            vm_target .clickSubmitBtn = true; //修改此处
            },500);
          }
        }
       })

补充:下面看下vue setTimeout--延迟操作

有时候我们在查询后要做某些事情,例如我查询的时候要根据某个值再去查询某些东西并和这些值一起显示的时候,我们可以对渲染数据的操作进行延迟,因为代码执行的速度是很快的而访问数据的操作先对于渲染的速度慢得多,所以往往数据还没查询到而数据就渲染完成了

setTimeout(() =>{
  要延迟的代码
},延迟时间);

总结

以上所述是小编给大家介绍的Vue中使用 setTimeout() setInterval()函数的问题 ,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js技巧--转义符"\"的妙用
Jan 09 Javascript
jquery 之 $().hover(func1, funct2)使用方法
Jun 14 Javascript
javascript格式化json显示实例分析
Apr 21 Javascript
avalon js实现仿google plus图片多张拖动排序附源码下载
Sep 24 Javascript
jquery自适应布局的简单实例
May 28 Javascript
教你JS中的运算符乘方、开方及变量格式转换
Aug 09 Javascript
js仿支付宝多方框输入支付密码效果
Sep 27 Javascript
原生js开发的日历插件
Feb 04 Javascript
webpack独立打包和缓存处理详解
Apr 03 Javascript
Node.js 8 中的重要新特性
Jun 28 Javascript
JS实现浏览上传文件的代码
Aug 23 Javascript
微信小程序wepy框架笔记小结
Aug 08 Javascript
Angularjs之ngModel中的值验证绑定方法
Sep 13 #Javascript
在小程序/mpvue中使用flyio发起网络请求的方法
Sep 13 #Javascript
解决angular2在双向数据绑定时[(ngModel)]无法使用的问题
Sep 13 #Javascript
mpvue中使用flyjs全局拦截的实现代码
Sep 13 #Javascript
AngularJS修改model值时,显示内容不变的实例
Sep 13 #Javascript
在vue中使用vue-echarts-v3的实例代码
Sep 13 #Javascript
vue的全局变量和全局拦截请求器的示例代码
Sep 13 #Javascript
You might like
暴雪前总裁遗憾:没尽早追赶Dota 取消星际争霸幽灵
2020/03/08 星际争霸
Android ProgressBar进度条和ProgressDialog进度框的展示DEMO
2013/06/19 PHP
PHP获取youku视频真实flv文件地址的方法
2014/12/23 PHP
PHP类的特性实例分析
2016/09/28 PHP
PHP中常见的密码处理方式和建议总结
2018/10/14 PHP
PHP的mysqli_rollback()函数讲解
2019/01/23 PHP
很酷的javascript loading效果代码
2008/06/18 Javascript
Javascript 获取字符串字节数的多种方法
2009/06/02 Javascript
从零开始学习jQuery (十) jQueryUI常用功能实战
2011/02/23 Javascript
也说JavaScript中String类的replace函数
2011/09/22 Javascript
让html页面不缓存js的实现方法
2014/10/31 Javascript
jQuery中eq()方法用法实例
2015/01/05 Javascript
nodejs处理图片的中间件node-images详解
2017/05/08 NodeJs
vue获取当前点击的元素并传值的实例
2018/03/09 Javascript
详解通过源码解析Node.js中cluster模块的主要功能实现
2018/05/16 Javascript
node crawler如何添加promise支持
2020/02/01 Javascript
Python入门篇之函数
2014/10/20 Python
纯Python开发的nosql数据库CodernityDB介绍和使用实例
2014/10/23 Python
python利用正则表达式提取字符串
2016/12/08 Python
使用Python处理Excel表格的简单方法
2018/06/07 Python
python写入数据到csv或xlsx文件的3种方法
2019/08/23 Python
python实现获取单向链表倒数第k个结点的值示例
2019/10/24 Python
keras自定义损失函数并且模型加载的写法介绍
2020/06/15 Python
Python 如何操作 SQLite 数据库
2020/08/17 Python
如何使用canvas绘制可移动网格的示例代码
2020/12/14 HTML / CSS
世界上最大的折扣香水店:FragranceNet.com
2016/10/26 全球购物
亚马逊加拿大网站:Amazon.ca
2020/01/06 全球购物
排序都有哪几种方法?请列举。用JAVA实现一个快速排序
2014/02/16 面试题
英语专业毕业生自荐信
2013/10/28 职场文书
保证书格式范文
2014/04/28 职场文书
公务员年终个人总结
2015/02/12 职场文书
小学教师节活动总结
2015/03/20 职场文书
简单的辞职信模板
2015/05/12 职场文书
CSS3 制作的图片滚动效果
2021/04/14 HTML / CSS
Python深度学习之Pytorch初步使用
2021/05/20 Python
《帝国时代4》赛季预告 新增内容编译器可创造地图
2022/04/03 其他游戏