直播app开发搭建，vue 一分钟倒计时功能实现

直播app开发搭建，vue 一分钟倒计时功能实现

HTML

<template>
  <div @click="countdowm" v-text="content "></div>
</template>

​在data里边定义相关变量

data() {
    return {
      content: "倒计时",
      canClick: true,
      refreshData: null
    };
  },

在methods里边定义相关方法

methods: {
  countdowm() {
    let totalTime = 60;
    if (!this.canClick) return; //节流
    this.canClick = false;
    this.content = totalTime + "s后重新倒计时";
    this.refreshData = window.setInterval(() => {
      totalTime--;
      this.content = totalTime + "s后重新倒计时";
      if (totalTime < 0) {
        //当倒计时小于0时清除定时器
        window.clearInterval(this.refreshData); //清除定时器
        this.content = "重新开始倒计时";
        totalTime = 60;
        this.canClick = true; //这里重新开启
      }
    }, 1000);
  }
},

 以上就是 直播app开发搭建，vue 一分钟倒计时功能实现，更多内容欢迎关注之后的文章