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 相关文章推荐
List Installed Software Features
Jun 11 Javascript
js类后台管理菜单类-MenuSwitch
Sep 12 Javascript
再次谈论Javascript中的this
Jun 23 Javascript
原生js编写基于面向对象的分页组件
Dec 05 Javascript
JavaScript自动点击链接 防止绕过浏览器访问的方法
Jan 19 Javascript
详解vue组件化开发-vuex状态管理库
Apr 10 Javascript
js绑定事件和解绑事件
Apr 27 Javascript
jQuery实现在HTML文档加载完毕后自动执行某个事件的方法
May 08 jQuery
详解node服务器中打开html文件的两种方法
Sep 18 Javascript
富文本编辑器vue2-editor实现全屏功能
May 26 Javascript
node创建Vue项目步骤详解
Mar 06 Javascript
JS运算符优先级与表达式示例详解
Sep 04 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数组函数序列 之array_count_values() 统计数组中所有值出现的次数函数
2011/10/29 PHP
thinkphp缓存技术详解
2014/12/09 PHP
smarty模板引擎从php中获取数据的方法
2015/01/22 PHP
php中使用url传递数组的方法
2015/02/11 PHP
php随机显示指定文件夹下图片的方法
2015/07/13 PHP
用javascript将数据库中的TEXT类型数据动态赋值到TEXTAREA中
2007/04/20 Javascript
JAVASCRIPT实现的WEB页面跳转以及页面间传值方法
2010/05/13 Javascript
jQuery选择器的工作原理和优化分析
2011/07/25 Javascript
如何使用Javascript获取距今n天前的日期
2013/07/08 Javascript
js实现九宫格图片半透明渐显特效的方法
2015/02/16 Javascript
js查看一个函数的执行时间实例代码
2015/09/12 Javascript
基于jQuery 实现bootstrapValidator下的全局验证
2015/12/07 Javascript
Javascript基于jQuery UI实现选中区域拖拽效果
2016/11/25 Javascript
Mui使用jquery并且使用点击跳转新窗口的实例
2017/08/19 jQuery
Vue 实现从小到大的横向滑动效果详解
2019/10/16 Javascript
详解Python的Django框架中的通用视图
2015/05/04 Python
python验证码识别实例代码
2018/02/03 Python
python更改已存在excel文件的方法
2018/05/03 Python
python json.loads兼容单引号数据的方法
2018/12/19 Python
用python求一个数组的和与平均值的实现方法
2019/06/29 Python
33个Python爬虫项目实战(推荐)
2019/07/08 Python
如何使用python爬虫爬取要登陆的网站
2019/07/12 Python
python opencv实现证件照换底功能
2019/08/19 Python
Python flask框架实现查询数据库并显示数据
2020/06/04 Python
Python异常处理机制结构实例解析
2020/07/23 Python
一些常用的HTML5模式(pattern) 总结
2015/07/14 HTML / CSS
荷兰优雅女装网上商店:Heine
2016/11/14 全球购物
英国评分最高的女性剃须刀订阅盒:FFS Beauty
2018/01/25 全球购物
蔻驰西班牙官网:COACH西班牙
2019/01/16 全球购物
法院执行局工作总结
2015/08/11 职场文书
2019年度开业庆典祝福语大全!
2019/07/05 职场文书
个人房屋租赁合同(标准范本)
2019/09/16 职场文书
Python Numpy库的超详细教程
2022/04/06 Python
Python函数对象与闭包函数
2022/04/13 Python
Python 图片添加美颜效果
2022/04/28 Python
win10系统计算机图标怎么调出来?win10调出计算机图标的方法
2022/08/14 数码科技