vue倒计时结束清除销毁定时器,vue定时刷新数据列表，vue定时调用后端接口更新页面数据

web前端妹妹

已于 2023-03-23 11:53:00 修改

阅读量1.1k

点赞数

于 2022-10-08 14:50:27 首次发布

本文链接：https://blog.csdn.net/qq_39695210/article/details/127208738

版权

1.效果图

vue倒计时结束清除销毁定时器,vue定时刷新数据列表，vue定时调用后端接口更新页面数据

2.代码示例

<template>
  <div class="content">
    <div class="botton">倒计时{
  {countdown}}s</div>
  </div>

</template>
<script>
export default {
  name: "home",
  data () {
    return {
      timer: null,//定时器名称
      countdown: 0,//倒计时
    }
  },

  //生命周期若已设置定时器，需清空定时器beforeDestroy()
  destroyed () {
    //清除定时器
    clearInterval(this.timer);
    this.timer=null;
  },
  mounted () {
    // 倒计时60s
    this.countdown=60; //赋值60秒
    let times=setInterval(() => {
      this.countdown--; //递减
      if(this.countdown<=0) {
        this.isPopup=false;
        clearInterval(times);
        times=null;
      }
    },1000); //1000毫秒后执