vue制作简易日历

最新推荐文章于 2024-07-23 11:18:48 发布

&ACE&

最新推荐文章于 2024-07-23 11:18:48 发布

阅读量182

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_59525879/article/details/135039077

版权

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