Vue 5分钟倒计时组件：实现简单计时功能 - 代码示例

以下是一个 Vue 倒计时组件的示例：

<template>
  <div>
    <h1>{{ minutes }}:{{ seconds }}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      minutes: 5,
      seconds: 0
    };
  },
  created() {
    this.startCountdown();
  },
  methods: {
    startCountdown() {
      setInterval(() => {
        if (this.seconds > 0) {
          this.seconds--;
        } else {
          if (this.minutes > 0) {
            this.minutes--;
            this.seconds = 59;
          } else {
            clearInterval();
          }
        }
      }, 1000);
    }
  }
};
</script>

在这个示例中，我们使用了 Vue 的计算属性来显示倒计时的分钟和秒数。minutes 和 seconds 的初始值分别为 5 和 0。在组件的 created 生命周期钩子函数中，我们调用了 startCountdown 方法来启动倒计时。

startCountdown 方法使用 setInterval 函数来每秒减少一秒。如果秒数大于 0，则减少 1 秒；如果秒数为 0，则减少 1 分钟，并将秒数重置为 59。如果分钟数为 0，则清除计时器，停止倒计时。

在模板中，我们将分钟和秒数显示在一个 h1 标签中，使用插值表达式 {{ minutes }}:{{ seconds }} 来显示倒计时的数值。

使用这个组件，你可以在你的 Vue 应用中添加一个倒计时功能。在你的 Vue 文件中引入这个组件，并将它添加到你的模板中，就可以显示一个 5 分钟的倒计时。