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实现动态增加文件域表单
Feb 12 Javascript
JQuery实现简单验证码提示解决方案
Dec 20 Javascript
jQuery的显示和隐藏方法与css隐藏的样式对比
Oct 18 Javascript
jquery用offset()方法获得元素的xy坐标
Sep 06 Javascript
谈一谈javascript闭包
Jan 28 Javascript
JS中多步骤多分步的StepJump组件实例详解
Apr 01 Javascript
javascirpt实现2个iframe之间传值的方法
Jun 30 Javascript
Bootstrap3制作搜索框样式的方法
Jul 11 Javascript
jQuery ajax调用webservice注意事项
Oct 08 jQuery
webpack4的迁移的使用方法
May 25 Javascript
原生JS实现的轮播图功能详解
Aug 06 Javascript
何时使用Map来代替普通的JS对象
Apr 29 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 会话(session 时间设定)使用入门代码
2008/06/05 PHP
php取整函数ceil,floo,round的用法及介绍
2013/08/31 PHP
XMLHTTPRequest的属性和方法简介
2010/11/23 Javascript
修改file按钮的默认样式实现代码
2013/04/23 Javascript
利用js读取动态网站从服务器端返回的数据
2014/02/10 Javascript
jquery制作居中遮罩层效果分享
2014/02/21 Javascript
可以浮动某个物体的jquery控件用法实例
2015/07/24 Javascript
Jquery easyui开启行编辑模式增删改操作
2016/01/14 Javascript
Bootstrap CSS使用方法
2016/12/23 Javascript
微信小程序中form 表单提交和取值实例详解
2017/04/20 Javascript
Javascript组合继承方法代码实例解析
2020/04/02 Javascript
JS array数组检测方式解析
2020/05/19 Javascript
js 压缩图片的示例(只缩小体积,不更改图片尺寸)
2020/10/21 Javascript
[01:14:05]《加油DOTA》第四期
2014/08/25 DOTA
[49:21]完美世界DOTA2联赛循环赛 Ink Ice vs LBZS BO2第二场 11.05
2020/11/06 DOTA
[01:10:27]DOTA2-DPC中国联赛正赛 SAG vs XG BO3 第二场 3月5日
2021/03/11 DOTA
python将xml xsl文件生成html文件存储示例讲解
2013/12/03 Python
详解Python中的装饰器、闭包和functools的教程
2015/04/02 Python
如何在python中使用selenium的示例
2017/12/26 Python
selenium+python 去除启动的黑色cmd窗口方法
2018/05/22 Python
对Python3中bytes和HexStr之间的转换详解
2018/12/04 Python
解决pycharm回车之后不能换行或不能缩进的问题
2019/01/16 Python
YUV转为jpg图像的实现
2019/12/09 Python
全球最大的户外用品零售商之一:The House
2018/06/12 全球购物
Baby Tulai澳大利亚:美国婴儿背带品牌
2018/10/15 全球购物
SportsDirect.com马来西亚:英国第一体育零售商
2018/11/21 全球购物
先进党支部事迹材料
2014/01/13 职场文书
2014自主招生自荐信策略
2014/01/27 职场文书
小学生美德少年事迹材料
2014/08/24 职场文书
办公室领导干部作风整顿个人整改措施
2014/09/17 职场文书
学生未请假就回家检讨书
2014/09/22 职场文书
领导欢迎词致辞
2015/01/23 职场文书
律政俏佳人观后感
2015/06/09 职场文书
python使用pygame创建精灵Sprite
2021/04/06 Python
vue-cropper插件实现图片截取上传组件封装
2021/05/27 Vue.js
如何通过cmd 连接阿里云服务器
2022/04/18 Servers