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 相关文章推荐
javascript 判断数组是否已包含了某个元素的函数
May 30 Javascript
浅析jQuery中常用的元素查找方法总结
Jul 04 Javascript
Javascript表格翻页效果实现思路及代码
Aug 23 Javascript
jQuery结合HTML5制作的爱心树表白动画
Feb 01 Javascript
js实现图片和链接文字同步切换特效的方法
Feb 20 Javascript
js实现横向百叶窗效果网页切换动画效果的方法
Mar 02 Javascript
jQuery基于ajax()使用serialize()提交form数据的方法
Dec 08 Javascript
javascript中的作用域和闭包详解
Jan 13 Javascript
jQuery实现左侧导航模块的显示与隐藏效果
Jul 04 Javascript
JS鼠标3次点击事件实现代码及扩展思路
Sep 12 Javascript
Vue-路由导航菜单栏的高亮设置方法
Mar 17 Javascript
Vue filter格式化时间戳时间成标准日期格式的方法
Sep 16 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
PHP新手上路(十一)
2006/10/09 PHP
浅谈php中include文件变量作用域
2015/06/18 PHP
54个提高PHP程序运行效率的方法
2015/07/19 PHP
PHP实现的链式队列结构示例
2017/09/15 PHP
laravel 如何实现引入自己的函数或类库
2019/10/15 PHP
javascript实现页面内关键词高亮显示代码
2014/04/03 Javascript
js中将String转换为number以便比较
2014/07/08 Javascript
《JavaScript函数式编程》读后感
2015/08/07 Javascript
详解vue-Resource(与后端数据交互)
2017/01/16 Javascript
深入理解Angularjs中$http.post与$.post
2017/05/19 Javascript
js实现移动端导航点击自动滑动效果
2017/07/18 Javascript
HTML5开发Kinect体感游戏的实例应用
2017/09/18 Javascript
layui点击导航栏刷新tab页的示例代码
2018/08/14 Javascript
使用Angular 6创建各种动画效果的方法
2018/10/10 Javascript
vue单页面在微信下只能分享落地页的解决方案
2019/04/15 Javascript
在Python的Django框架上部署ORM库的教程
2015/04/20 Python
Python3通过Luhn算法快速验证信用卡卡号的方法
2015/05/14 Python
使用Python对Access读写操作
2017/03/30 Python
fastcgi文件读取漏洞之python扫描脚本
2017/04/23 Python
在numpy矩阵中令小于0的元素改为0的实例
2019/01/26 Python
python使用MQTT给硬件传输图片的实现方法
2019/05/05 Python
python二维码操作:对QRCode和MyQR入门详解
2019/06/24 Python
Python 使用 PyMysql、DBUtils 创建连接池提升性能
2019/08/14 Python
详解Python绘图Turtle库
2019/10/12 Python
基于torch.where和布尔索引的速度比较
2020/01/02 Python
python实现二分查找算法
2020/09/18 Python
python 中关于pycharm选择运行环境的问题
2020/10/31 Python
教育学专业毕业生的自我评价
2013/11/21 职场文书
写给老婆的检讨书
2014/02/21 职场文书
销售团队获奖感言
2014/08/14 职场文书
2014年工作总结与下年工作计划
2014/11/27 职场文书
2015年护理工作总结范文
2015/04/03 职场文书
商务宴会祝酒词
2015/08/11 职场文书
2016党员入党决心书
2015/09/22 职场文书
公安纪律作风整顿心得体会
2016/01/23 职场文书
pycharm安装深度学习pytorch的d2l包失败问题解决
2022/03/25 Python