如何在Vue中实现日历功能

<template>  <div class="calendar">    <div class="header">      <button @click="prevMonth">&larr;</button>      <h2>{{ currentMonth }}</h2>      <button @click="nextMonth">&rarr;</button>    </div>    <div class="days">      <div v-for="day in days" :key="day">{{ day }}</div>    </div>    <div class="dates">      <div v-for="date in visibleDates" :key="date">{{ date }}</div>    </div>  </div></template><script>export default {  data() {    return {      currentMonth: '',      days: [],      visibleDates: []    };  },  mounted() {    this.initCalendar();  },  methods: {    initCalendar() {      const now = new Date();      const year = now.getFullYear();      const month = now.getMonth();      this.currentMonth = `${year}-${month + 1}`;      const firstDay = new Date(year, month, 1).getDay();      const lastDay = new Date(year, month + 1, 0).getDate();      this.days = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];      this.visibleDates = Array(firstDay).fill('').concat(Array.from({ length: lastDay }, (_, i) => i + 1));    },    prevMonth() {      const [year, month] = this.currentMonth.split('-').map(Number);      const prevMonth = month === 1 ? 12 : month - 1;      const prevYear = month === 1 ? year - 1 : year;      this.currentMonth = `${prevYear}-${prevMonth}`;      this.updateVisibleDates();    },    nextMonth() {      const [year, month] = this.currentMonth.split('-').map(Number);      const nextMonth = month === 12 ? 1 : month + 1;      const nextYear = month === 12 ? year + 1 : year;      this.currentMonth = `${nextYear}-${nextMonth}`;      this.updateVisibleDates();    },    updateVisibleDates() {      const [year, month] = this.currentMonth.split('-').map(Number);      const firstDay = new Date(year, month - 1, 1).getDay();      const lastDay = new Date(year, month, 0).getDate();      this.visibleDates = Array(firstDay).fill('').concat(Array.from({ length: lastDay }, (_, i) => i + 1));    }  }};</script><style scoped>.calendar {  width: 400px;  margin: 0 auto;}.header {  display: flex;  justify-content: space-between;  align-items: center;  margin-bottom: 10px;}.days {  display: grid;  grid-template-columns: repeat(7, 1fr);}.dates {  display: grid;  grid-template-columns: repeat(7, 1fr);}</style>