Vue 5分钟倒计时示例 - 简单易懂的代码实现

<template>
  <div>
    <h1>{{ timeLeft }}</h1>
  </div>
</template>
<script>
export default {
  data() {
    return {
      timeLeft: 300 // 5分钟，单位为秒
    }
  },
  mounted() {
    this.countdown()
  },
  methods: {
    countdown() {
      setInterval(() => {
        if (this.timeLeft > 0) {
          this.timeLeft--
        }
      }, 1000)
    }
  }
}
</script>
<p>在这个示例中，我们使用了Vue的data属性来保存倒计时的剩余时间。在mounted生命周期钩子中，我们调用countdown方法来开始倒计时。在countdown方法中，我们使用setInterval函数来每秒减少剩余时间，直到时间为0。倒计时的剩余时间通过插值表达式（双大括号）显示在HTML模板中。</p>
<p>需要注意的是，这个示例中的倒计时是在客户端进行的，如果需要在服务器端进行倒计时，需要使用其他的方法。</p>