Vue中使用 setTimeout() setInterval()函数的问题
更新时间：2018年09月13日 11:41:03 作者：咩咩阳
这篇文章主要介绍了Vue中使用 setTimeout() setInterval()函数的问题 ,需要的朋友可以参考下
在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()函数的问题 ，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
今天小编就为大家分享一篇基于form-data请求格式详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-10-10
这篇文章主要介绍了vue 实现LED数字时钟效果（开箱即用）,每一个数字由七个元素构成，即每一个segment元素，本文给大家分享实现实例，感兴趣的朋友一起看看吧2019-12-12
vue+el-element中根据文件名动态创建dialog的方法实践
本文主要介绍了vue+el-element中根据文件名动态创建dialog的方法实践，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-12-12
这篇文章主要为大家详细介绍了Vue下拉选择框Select组件的使用，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
这篇文章主要为大家详细介绍了vue自定义指令实现v-tap插件的相关资料,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-11-11
这篇文章主要介绍了在vue项目中封装echarts的步骤，帮助大家更好的理解和使用vue，感兴趣的朋友可以了解下2020-12-12
这篇文章主要介绍了vue项目打包后proxyTable代理失效问题及解决方案，具有很好的参考价值，希望对大家有所帮助。2023-05-05
这篇文章主要介绍了vue内嵌iframe跨域通信,主要介绍了Vue组件中如何引入iframe，vue如何获取iframe对象以及iframe内的window对象，结合实例代码给大家介绍的非常详细需要的朋友可以参考下2022-11-11
这篇文章主要介绍了vue使用echarts实现水平柱形图实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-09-09
这篇文章主要介绍了vue中vant组件样式失效问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
最新评论