【vue一分钟倒计时】

一分钟倒计时

<template>
  <div @click="sendCode">
    {{ content }}
  </div>
</template>

在data里边写

data() {
    return {
      content: "获取验证码",
      totalTime: 60, //倒计时
      canClick: true,
    };
  },

在methods里边写

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