// calendar.vue
<template>
    <div class="container">
        <h2>{{year}}-{{month}}-{{day}}</h2>
        <div class="calendar">
            <!-- 星期 -->
            <div v-for="(item, index) in dayArr" :key="index">{{item}}</div> 
            <!-- 天数 -->
            <div v-for="item in dateArr" :key="item" :class="day == item ? 'active': ''">{{item}}</div> 
        </div>
    </div>
</template>

<script>
import { onMounted, reactive, toRefs } from 'vue';
export default {
    setup(){
        const state  = reactive({
            year: '', // 年
            month: '', // 月
            day: '', // 日
            dayArr: ["日", "一", "二", "三", "四", "五", "六"], // 星期数组
            dateArr: [] // 当前月份的天数
        })

        const addZero = (date) => { // 月、日个位数 补零
            return date.toString().padStart(2,'0');
        }

        const getDate = (newDate) => { // 获得当前月份的所有天数
            let date = new Date(newDate); 
            state.year = date.getFullYear();
            state.month = addZero(date.getMonth()+1); // 补零
            state.day = addZero(date.getDate()); // 补零

            let firstDay = new Date(state.year, state.month-1,1).getDay(); // 每月第一天星期几
            
            let monthNum = new Date(state.year, state.month, -1).getDate()+1; // 每月天数

            for (let i = 1; i < monthNum + 1; i++) {
                state.dateArr.push(i); // 遍历添加当前月份的每一天
            }
            for (let i = 0; i < firstDay; i++) {
                state.dateArr.unshift(''); // 根据第一天在数组前填充字符串，确定第一天是星期几
            }

        }

        onMounted(() => { // 相当于 vue2.0 的 mounted
            getDate(new Date());
        })

        return{
            ...toRefs(state) // 将 state 返回出去，就可以直接使用 state 里面的属性
        }
    },
}
</script>

<style scoped lang="less"> 

.container{
    width: 50vw;
    height: 50vh;
    background-color: skyblue;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    .calendar{
        width: 80%;
        height: 80%;
        background-color: #fff;
        display: flex;
        flex-wrap: wrap;
        div{
            width: calc(100% / 7);
            height: calc(100% / 7);
            display: flex;
            align-items: center;
            justify-content: center;
        }
    }
}
.active{
    background-color: skyblue;
    color: #fff;
}
</style>

小小实习生，代码比较粗糙，大佬请赐教