vue3 { "hours": 2000, "minutes": 0 }

在Vue 3中，你可以创建一个计算属性（computed property）来格式化倒计时时间。假设你有如下的数据结构：

data() {
  return {
    countdown: { hours: 2000, minutes: 0 },
  };
}

你可以这样实现格式化显示：

computed: {
  formattedCountdown() {
    const totalSeconds = this.countdown.hours * 3600 + this.countdown.minutes * 60;
    let hours = Math.floor(totalSeconds / 3600);
    let minutes = Math.floor((totalSeconds % 3600) / 60);
    let seconds = totalSeconds % 60;
    
    return `${hours}小时${minutes}分钟${seconds}秒`;
  },
},

然后在模板中使用`formattedCountdown`显示结果：

<p>剩余时间: {{ formattedCountdown }}</p>

当倒计时结束（countdown对象的总秒数减到0），你需要清除定时器并重新设置：

methods: {
  startCountdown() {
    if (!this.intervalId) {
      this.intervalId = setInterval(() => {
        if (this.countdown.totalSeconds > 0) {
          this.countdown.totalSeconds--;
        } else {
          clearInterval(this.intervalId);
          this.countdown.totalSeconds = 60 * 60 * 2; // 重置为2小时（这里假设是2000小时）
          this.startCountdown(); // 重新开始计时器
        }
      }, 1000);
    }
  },
},