vue写一个验证码倒计时功能

可以通过 Vue 的计时器和条件渲染来实现验证码倒计时功能。具体实现步骤如下：

1. 在 data 中定义一个变量，用于存储倒计时的秒数。

2. 创建一个方法 startCountdown，用于开始倒计时。在该方法中，使用 setInterval 定时器每秒更新倒计时的秒数，并在倒计时结束后清除定时器。

3. 在模板中使用条件渲染，如果倒计时的秒数大于 0，则显示倒计时的秒数；否则显示获取验证码的按钮。

下面是示例代码：

<template>
  <div>
    <button v-if="countdown === 0" @click="startCountdown">获取验证码</button>
    <span v-else>{{ countdown }} 秒后重新获取</span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      countdown: 0,
    };
  },
  methods: {
    startCountdown() {
      this.countdown = 60; // 设置倒计时的秒数
      const timer = setInterval(() => {
        this.countdown--;
        if (this.countdown === 0) {
          clearInterval(timer); // 清除定时器
        }
      }, 1000);
    },
  },
};
</script>

在上述代码中，当点击获取验证码按钮时，会调用 startCountdown 方法开始倒计时。倒计时结束后，按钮会重新出现，用户可以再次点击获取验证码。