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 相关文章推荐
jQuery 1.5最新版本的改进细节分析
Jan 19 Javascript
JavaScript学习笔记(一) js基本语法
Oct 25 Javascript
jquery next nextAll nextUntil siblings的区别介绍
Oct 05 Javascript
js的for in循环和java里foreach循环的区别分析
Jan 28 Javascript
javascript实现回到顶部特效
May 06 Javascript
JavaScript中Math.SQRT2属性的使用详解
Jun 14 Javascript
使用postMesssage()实现跨域iframe页面间的信息传递方法
Mar 29 Javascript
浅析JS操作DOM的一些常用方法
May 13 Javascript
Vue获取DOM元素样式和样式更改示例
Mar 07 Javascript
详解微信小程序 通过控制CSS实现view隐藏与显示
May 24 Javascript
ES6中新增的Object.assign()方法详解
Sep 22 Javascript
基于angular-utils-ui-breadcrumbs使用心得(分享)
Nov 03 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仿QQ验证码的实例分析
2013/07/01 PHP
WordPress特定文章对搜索引擎隐藏或只允许搜索引擎查看
2015/12/31 PHP
PHP自定义函数判断是否为Get、Post及Ajax提交的方法
2017/07/27 PHP
详解no input file specified 三种解决方法
2019/11/29 PHP
基于Bootstrap重置输入框内容按钮插件
2016/05/12 Javascript
jQuery学习心得总结(必看篇)
2016/06/10 Javascript
jQuery查找dom的几种方法效率详解
2017/05/17 jQuery
Angular实现响应式表单
2017/08/04 Javascript
vue 组件 全局注册和局部注册的实现
2018/02/28 Javascript
微信小程序实现弹出菜单功能
2018/06/12 Javascript
微信小程序动画组件使用解析,类似vue,且更强大
2019/08/01 Javascript
layui表格内放置图片,并点击放大的实例
2019/09/10 Javascript
解决layui中onchange失效以及form动态渲染失效的问题
2019/09/27 Javascript
element-ui封装一个Table模板组件的示例
2021/01/04 Javascript
[40:03]DOTA2上海特级锦标赛主赛事日 - 1 败者组第一轮#1EHOME VS Archon
2016/03/02 DOTA
[01:07:19]2018DOTA2亚洲邀请赛 4.5 淘汰赛 Mineski vs VG 第一场
2018/04/06 DOTA
Python 匹配任意字符(包括换行符)的正则表达式写法
2009/10/29 Python
python实现文本文件合并
2015/12/29 Python
Python 操作文件的基本方法总结
2017/08/10 Python
Python中判断输入是否为数字的实现代码
2018/05/26 Python
Python如何将图像音视频等资源文件隐藏在代码中(小技巧)
2020/02/16 Python
使用python 计算百分位数实现数据分箱代码
2020/03/03 Python
用python绘制樱花树
2020/10/09 Python
python 实现简单的计算器(gui界面)
2020/11/11 Python
新媒传信软件测试面试题
2013/02/24 面试题
医学生求职自荐信
2013/10/25 职场文书
市场部专员岗位职责
2013/11/30 职场文书
国贸专业个人求职信范文
2014/01/08 职场文书
教师档案管理制度
2014/01/23 职场文书
幼儿教师师德承诺书
2014/05/23 职场文书
质量月活动总结
2014/08/26 职场文书
小学生教师节演讲稿
2014/09/03 职场文书
2015年发展党员工作总结报告
2015/03/31 职场文书
隐形的翅膀观后感
2015/06/10 职场文书
生活委员竞选稿
2015/11/21 职场文书
python游戏开发Pygame框架
2022/04/22 Python