Vue 倒计时组件：5 分钟倒计时实现 (代码示例)

<template>
  <div>
    <h2>{{ minutes }}:{{ seconds }}</h2>
  </div>
</template>
<script>
export default {
  data() {
    return {
      minutes: 5,
      seconds: 0
    }
  },
  mounted() {
    this.startTimer();
  },
  methods: {
    startTimer() {
      setInterval(() => {
        if (this.seconds > 0) {
          this.seconds--;
        } else if (this.minutes > 0) {
          this.minutes--;
          this.seconds = 59;
        } else {
          clearInterval();
        }
      }, 1000);
    }
  }
}
</script>
<p>在上面的示例中，我们使用了Vue的data属性来存储倒计时的分钟和秒数。在组件挂载后，我们调用了startTimer方法来开始倒计时。startTimer方法使用setInterval函数来每秒递减秒数和分钟数。当秒数为0时，我们减少分钟数并将秒数重置为59。当分钟数和秒数都为0时，我们清除定时器。</p>
<p>在模板中，我们使用插值语法{{}}来显示分钟和秒数。</p>