你可以使用Vue.js来制作一个简易日历。：
<!DOCTYPE html> <html> <head> <title>Vue简易日历</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <style> table { border-collapse: collapse; } td { border: 1px solid black; padding: 5px; } th { background-color: lightgray; border: 1px solid black; padding: 5px; } </style> </head> <body> <div id="app"> <h1>简易日历</h1> <table> <thead> <tr> <th v-for="day in daysOfWeek">{{ day }}</th> </tr> </thead> <tbody> <tr v-for="week in calendar"> <td v-for="day in week">{{ day }}</td> </tr> </tbody> </table> </div> <script> new Vue({ el: '#app', data: { daysOfWeek: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'], calendar: [], }, created() { this.generateCalendar(); }, methods: { generateCalendar() { const today = new Date(); const year = today.getFullYear(); const month = today.getMonth(); const firstDayOfMonth = new Date(year, month, 1); const lastDayOfMonth = new Date(year, month + 1, 0); const firstDayOfWeek = firstDayOfMonth.getDay(); const lastDayOfWeek = lastDayOfMonth.getDay(); const daysInMonth = lastDayOfMonth.getDate(); const calendar = [[]]; let weekIndex = 0; for (let i = 0; i < firstDayOfWeek; i++) { calendar[weekIndex].push(''); } for (let day = 1; day <= daysInMonth; day++) { if (calendar[weekIndex].length === 7) { calendar.push([]); weekIndex++; } calendar[weekIndex].push(day); } for (let i = lastDayOfWeek + 1; i < 7; i++) { calendar[weekIndex].push(''); } this.calendar = calendar; }, } }); </script> </body> </html>
你可以将此代码保存到一个HTML文件中，并在浏览器中打开查看结果。该日历将显示当前月份的日历表格。
