思路解析：假设展示2023年12月的日历
①通过new Date(new Date(2023,12).setDate(0)).getDate()获取2023.12月的天数lastDay
②通过new Date(2023,11,1).getDay()获取2023.12月第一天的起始位置startDay
③根据自己的需求在startDay和lastDay的前后补0，当前值为0的不显示
具体实现：
html部分
<div class="calendar"><header><span>日</span><span>一</span><span>二</span><span>三</span><span>四</span><span>五</span><span>六</span></header><section><div v-for="item in data.dateArr" :key="item.key" :style="{ height: `${100 / data.num}%` }"><div v-if="item.text != 0">{{ item.text }}</div></div></section>
</div>js部分
let data=reactive({dateArr:[],num:null
})onMounted(()=>{getCanlendar()
})const getCanlendar=()=>{const startDay = new Date(2023,11,1).getDay()const lastDay = new Date(new Date(2023,12).setDate(0)).getDate()const allDay = Math.ceil((lastDay + startDay) / 7) * 7data.dateArr = []data.num = Math.ceil((lastDay + startDay) / 7)for (let i = 1; i <= allDay; i++) {data.dateArr.push({text: (i - startDay) >= 1 && (i - startDay) <= lastDay ? i - startDay : 0,key: i})}
}scss部分
.calendar{width:700px;height:500px;header{display:flex;width:100%;height:30px;span{width:14.2%;height:30px;line-height:30px;text-align:center;}}section{height:calc(100% - 30px);>div{display:inline-black;width:14.2%;div{height:100%;text-align:center;}}}
}【ps:以上代码未经过测试，如有错误，请自己改正。】
