在vue中写一个倒计时

<template>
<div>
<p>倒计时：{{ countDown }}</p>
</div>
</template>

<script>
export default {
data() {
return {
countDown: 60 // 初始倒计时时间
}
},
mounted() {
this.timer = setInterval(() => {
this.countDown--
if (this.countDown === 0) {
clearInterval(this.timer)
}
}, 1000)
},
beforeDestroy() {
clearInterval(this.timer)
}
}
</script>

相关问题

在vue中写一个时间倒计时

<template>
<div>
<div>{{ days }} 天 {{ hours }} 时 {{ minutes }} 分 {{ seconds }} 秒</div>
</div>
</template>

<script>
export default {
data() {
return {
deadline: new Date("2022-01-01 00:00:00"),
days: 0,
hours: 0,
minutes: 0,
seconds: 0,
};
},
mounted() {
setInterval(() => {
let now = new Date().getTime();
let diff = this.deadline - now;

this.days = Math.floor(diff / (1000 * 60 * 60 * 24));
this.hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
this.minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
this.seconds = Math.floor((diff % (1000 * 60)) / 1000);
}, 1000);
},
};
</script>

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 方法开始倒计时。倒计时结束后，按钮会重新出现，用户可以再次点击获取验证码。