你可以使用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文件中，并在浏览器中打开查看结果。该日历将显示当前月份的日历表格。