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 常用功能总结
Mar 18 Javascript
jQuery实现单行文字间歇向上滚动源代码
Jun 02 Javascript
jquery 实现两Select 标签项互调示例代码
Sep 25 Javascript
原生js的RSA和AES加密解密算法
Oct 08 Javascript
JavaScript定义函数_动力节点Java学院整理
Jun 27 Javascript
iscroll.js滚动加载实例详解
Jul 18 Javascript
js实现网页的两个input标签内的数值加减(示例代码)
Aug 15 Javascript
input 标签实现输入框带提示文字效果(两种方法)
Oct 09 Javascript
ES6扩展运算符用法实例分析
Oct 31 Javascript
vue复合组件实现注册表单功能
Nov 06 Javascript
vue实现弹框遮罩点击其他区域弹框关闭及v-if与v-show的区别介绍
Sep 29 Javascript
vue cli3.0 引入eslint 结合vscode使用
May 27 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调用Webservice实例代码
2011/07/29 PHP
php处理文件的小例子(解压缩,删除目录)
2013/02/03 PHP
七种PHP开发环境搭建工具
2020/06/28 PHP
javascript实现跳转菜单的具体方法
2013/07/05 Javascript
node.js中的fs.link方法使用说明
2014/12/15 Javascript
详解JavaScript设计模式开发中的桥接模式使用
2016/05/18 Javascript
移动前端图片压缩上传的实例
2017/12/06 Javascript
VueRouter导航守卫用法详解
2017/12/25 Javascript
jQuery实现ajax回调函数带入参数的方法示例
2018/06/26 jQuery
JS打印彩色菱形的实例代码
2018/08/15 Javascript
在vue项目中使用md5加密的方法
2018/09/14 Javascript
vue+axios实现文件下载及vue中使用axios的实例
2018/09/21 Javascript
vue中使用cookies和crypto-js实现记住密码和加密的方法
2018/10/18 Javascript
浅谈Angular 观察者模式理解
2018/11/01 Javascript
vue-cli安装使用流程步骤详解
2018/11/08 Javascript
微信h5静默和非静默授权获取用户openId的方法和步骤
2020/06/08 Javascript
浅析我对JS延迟异步脚本的思考
2020/10/12 Javascript
vue前端和Django后端如何查询一定时间段内的数据
2021/02/28 Vue.js
跟老齐学Python之坑爹的字符编码
2014/09/28 Python
回调函数的意义以及python实现实例
2017/06/20 Python
Python实现动态添加属性和方法操作示例
2018/07/25 Python
Python中利用aiohttp制作异步爬虫及简单应用
2018/11/29 Python
对python的bytes类型数据split分割切片方法
2018/12/04 Python
Python中字符串与编码示例代码
2019/05/20 Python
Python将视频或者动态图gif逐帧保存为图片的方法
2019/09/10 Python
python 如何去除字符串头尾的多余符号
2019/11/19 Python
tensorflow模型继续训练 fineturn实例
2020/01/21 Python
Python 程序员必须掌握的日志记录
2020/08/17 Python
python 下载m3u8视频的示例代码
2020/11/11 Python
爱游人:Travelliker
2017/09/05 全球购物
印尼第一大家居、生活和家具电子商务:Ruparupa
2019/11/25 全球购物
总经理文秘岗位职责
2014/02/03 职场文书
2014年酒店工作总结范文
2014/11/17 职场文书
机关单位2016年创先争优活动总结
2016/04/05 职场文书
深入详解JS函数的柯里化
2021/06/09 Javascript
Java实现字符串转为驼峰格式的方法详解
2022/07/07 Java/Android