vue3倒计时60s验证码

在Vue 3中创建一个60秒倒计时验证码功能，你可以使用`<template>`、`<script>`和`<style>`这三个部分来实现。下面是一个简单的例子：

**HTML模板 (`<template>.vue`)**:

<template>
  <div>
    <h2>{{ countdownText }}</h2>
    <button @click="startCountdown">获取验证码</button>
  </div>
</template>

**JS逻辑 (`<script>.js`):**

<script setup>
import { ref, onMounted, reactive } from 'vue';

// 定义倒计时变量
const countdown = ref(60);
const countdownText = computed(() => `验证码将在${countdown.value}秒后过期`);

// 开始倒计时
function startCountdown() {
  let intervalId;
  intervalId = setInterval(() => {
    countdown.value--;
    if (countdown.value === 0) {
      clearInterval(intervalId);
      // 实际应用中，此处可能会发送验证码或清除显示
      console.log('验证码已过期');
    }
  }, 1000);
}
</script>

**CSS样式 (`<style>`):**

<style scoped>
button {
  margin-top: 10px;
}
</style>

在这个示例里，当点击"获取验证码"按钮时，开始一个定时器每秒递减`countdown`值。当倒计时结束时，你需要添加相应的逻辑，比如发送实际的验证码或者更新界面状态。