Vue 2实现验证码倒计时

在Vue 2中，你可以使用setInterval来实现倒计时功能。以下是一个简单的示例，演示如何在Vue 2组件中实现获取验证码后的60秒倒计时

<template>
  <div>
    <button :disabled="isCountingDown" @click="getCaptcha">获取验证码</button>
    <p v-if="isCountingDown">剩余时间：{{ countdown }}秒</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isCountingDown: false, // 是否正在倒计时
      countdown: 60, // 倒计时秒数
      timer: null, // 定时器
    };
  },
  methods: {
    getCaptcha() {
      if (this.isCountingDown) {
        return; // 如果正在倒计时，则不执行获取验证码操作
      }
      
      // 在这里执行获取验证码的操作，比如向服务器发送请求

      // 开始倒计时
      this.isCountingDown = true;
      this.timer = setInterval(() => {
        if (this.countdown > 0) {
          this.countdown--;
        } else {
          // 倒计时结束，重置状态
          this.isCountingDown = false;
          this.countdown = 60;
          clearInterval(this.timer); // 清除定时器
        }
      }, 1000);
    },
  },
};
</script>

在这个示例中，我们使用了isCountingDown来标记是否正在倒计时，countdown来存储剩余的秒数。当点击“获取验证码”按钮时，会执行getCaptcha方法。如果正在倒计时，则不会执行获取验证码的操作。否则，会开始倒计时，并每秒更新countdown的值。当倒计时结束时，会重置isCountingDown和countdown的值，并清除定时器。