vue 5分钟倒计时

在Vue.js中创建一个简单的5分钟倒计时功能，你可以使用计算属性结合JavaScript的Date对象来实现。以下是一个基本的步骤：

1. 创建一个新的Vue组件并引入`v-bind:ref="timerRef"`来绑定一个引用到定时器元素上。

<template>
  <div id="counter">
    <p v-text="remainingTime"></p>
  </div>
</template>

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

const timerRef = ref(null);
let timeoutId;

function startCountdown() {
  const countdownTime = 60 * 1000; // 5 minutes in milliseconds

  function updateTimer() {
    if (timeoutId) {
      clearTimeout(timeoutId);
    }

    const remainingTime = Math.floor(countdownTime / 1000); // convert seconds to minutes
    timeoutId = setTimeout(() => {
      updateTimer();
    }, 1000);

    // Set the remaining time as a computed property
    timerRef.value.textContent = `${remainingTime} 秒`;
  }

  // Start the countdown on mounting
  updateTimer();
}

onMounted(() => {
  startCountdown();
});

// Remember to stop the countdown when component unmounts
onBeforeUnmount(() => {
  clearTimeout(timeoutId);
});
</script>

这个例子中，我们在组件挂载时启动倒计时，在组件卸载前停止它。每次更新时间时，我们都会重新设置剩余时间，并显示在页面上。