vue 实现 今日已经过去X小时,这周已经过去X天,本月已经过去X天,今年已经过去X个月

使用Vue.js编写一个组件来实现这个功能。展示如何在Vue组件中实现显示今日已经过去的小时数、本周已经过去的天数、本月已经过去的天数和今年已经过去的月数：

<template>
  <div>
    <p>今日已经过去{{ hoursPassed }}小时，{{ hourPercentage }}%</p>
    <p>本周已经过去{{ daysPassedThisWeek }}天，{{ dayPercentage }}%</p>
    <p>本月已经过去{{ daysPassedThisMonth }}天，{{ monthPercentage }}%</p>
    <p>今年已经过去{{ monthsPassedThisYear }}个月，{{ yearPercentage }}%</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      hoursPassed: 0,
      daysPassedThisWeek: 0,
      daysPassedThisMonth: 0,
      monthsPassedThisYear: 0,
      hourPercentage: 0,
      dayPercentage: 0,
      monthPercentage: 0,
      yearPercentage: 0
    };
  },
  created() {
    const now = new Date();
    const startOfWeek = new Date(now.getFullYear(), now.getMonth(), now.getDate() - now.getDay());
    const startOfMonth = new Date(now.getFullYear(), now.getMonth(), 1);
    
    // Calculate hours passed today
    this.hoursPassed = now.getHours();
    this.hourPercentage = (this.hoursPassed / 24) * 100;
    
    // Calculate days passed this week
    this.daysPassedThisWeek = now.getDay() + 1;
    this.dayPercentage = (this.daysPassedThisWeek / 7) * 100;
    
    // Calculate days passed this month
    this.daysPassedThisMonth = now.getDate();
    const totalDaysInMonth = new Date(now.getFullYear(), now.getMonth() + 1, 0).getDate();
    this.monthPercentage = (this.daysPassedThisMonth / totalDaysInMonth) * 100;
    
    // Calculate months passed this year
    this.monthsPassedThisYear = now.getMonth() + 1;
    this.yearPercentage = (this.monthsPassedThisYear / 12) * 100;
  }
};
</script>