iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >vue实现定时刷新数据,每隔5分钟执行一次
  • 814
分享到

vue实现定时刷新数据,每隔5分钟执行一次

vue刷新数据vue定时刷新数据vue数据刷新 2023-01-16 12:01:36 814人浏览 薄情痞子
摘要

目录Vue定时刷新数据,每隔5分钟执行一次vue局部定时刷新设置定时器局部刷新清除定时器总结vue定时刷新数据,每隔5分钟执行一次 data() { return { t

vue定时刷新数据,每隔5分钟执行一次

data() {
  return {
    timer: null
  }
},
mounted() {
   // 每隔5分钟定时刷新
   this.timer = setInterval(() => {
     this.getFxItemlist();
   }, 300000)
 },
 beforeDestroy() {
   clearInterval(this.timer);
 },
 methods: {
 getFxItemlist() {
   ...
 }
}

vue局部定时刷新

定时刷新一般都会想到定时器,vue局部定时刷新如下:

设置定时器

    timer: "",//定时器
    
    //定时器刷新待办事项
     this.timer = setInterval(() => {
      self.reload();
    }, 1000);

局部刷新

 <div class="DealtTop" v-if="isRefreshAlive">
 
 isRefreshAlive: true, //刷新
//局部刷新
    reload() {
      this.isRefreshAlive = false;
      this.$nextTick(function() {
        this.isRefreshAlive = true;
      });
    },

如果是在父子组件中,还需要加上provide / inject配合使用,如下:

 provide() {
    return {
      reload: this.reload
    };
  },

清除定时器

destroyed(){
    clearInterval(this.timer);
  },

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。

--结束END--

本文标题: vue实现定时刷新数据,每隔5分钟执行一次

本文链接: https://www.lsjlt.com/news/177841.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作