Vue 筆記 - 表格中放入七天日期實作

這次筆記是要記錄如何在表格中顯示日期，並讓第一格的日期顯示當日與星期。

開發環境與使用技術

Window10
Vue.js
Bootstap4
moment.js 2.29.1

切好靜態版面

引入要使用的相關套件後，先建立一個 table 並使用 bootstrap4 表格以便符合 RWD 的樣式，並切好靜態版面。

<div id="app">
  <div class="table-responsive">
    <table class="table table-hover table-bordered">
      <thead class="table-info sticky-top">
        <tr>
          <th scope="col">日期</th>
          <th scope="col">
            <span>2/11</span>
            <br />
            <span>星期四</span>
          </th>
          <th scope="col">
            <span>2/12</span>
            <br />
            <span>星期五</span>
          </th>
          <th scope="col">
            <span>2/13</span>
            <br />
            <span>星期六</span>
          </th>
          <th scope="col">
            <span>2/14</span>
            <br />
            <span>星期日</span>
          </th>
          <th scope="col">
            <span>2/15</span>
            <br />
            <span>星期一</span>
          </th>
          <th scope="col">
            <span>2/16</span>
            <br />
            <span>星期二</span>
          </th>
          <th scope="col">
            <span>2/17</span>
            <br />
            <span>星期三</span>
          </th>
        </tr>
      </thead>
    </table>
  </div>
</div>

會得到的畫面如下，

引入 Vue.js 並改寫 HTML

依照目前畫面我會需要以下條件：

需要顯示日期
需要顯示星期幾
要顯示七天內
判斷如果是假日的話，背景提示色為紅色

分析後得到簡單的思維是：

因為有範圍有多筆資料，所以可以使用陣列來存資料。
因為有重複顯示的資料，所以要使用 for 迴圈。
有判斷所以會用到 if。

所以來改寫 table 並且把對應要放的資料建立在 vue 的實體內。

HTML

透過 v-for 將 dayList 的對應替換原本的日期與星期

<thead class="table-info sticky-top">
  <tr>
    <th scope="col">時間</th>
    <th scope="col" v-for="(item, index) in dayList" :key="index">
      <span>{{ item.date }}</span> //日期
      <br />
      <span>{{ item.week }}</span> // 星期
    </th>
  </tr>
</thead>

Vue
說明：

在資料中建立一個 dayList 陣列，要用迴圈取得。
在 methods 先把 dayList 陣列清空。
因為一週為七天，所以可以確認範圍要小於七天。
使用 moment.js 取得當下日期與星期。
使用 push 方法，把自訂的日期物件新增到 dayList 陣列中。
d: 因為 API 制定日期會是 YYYY-MM-DD 的形式居多，所以有自訂一個驗證用的屬性來使用，但不呈現於畫面上。
week:為了要計算哪一天是假日，所以另外使用一個 toWeek 的函式做判斷，只要對應到為 6 與 7 的值，就是假日，因為週間天數的名稱並不會改變，所以就直接打入中文。
在 CSS 也要新增一個 .holiday 的 class 做顏色的樣式變化。
這邊設定為在載入畫面前就要抓到日期，所以使用 created 來執行 getDate 方法。

let vm = new Vue({
  el: "#app",
  data: {
    dayList: [],
  },
  created() {
    this.getDate();
  },
  methods: {
    getDate() {
      this.dayList = []; //存放日期的陣列
      for (let i = 0; i < 7; i++) {
        let day = moment().add(i, "days");
        let week = Number(day.format("E"));
        this.dayList.push({
          date: day.format("MM/DD"),
          d: day.format("YYYY-MM-DD"), //驗證用
          week: this.toWeek(Number(week)),
          holiday: week === 6 || week === 7,
        });
      }
    },
    toWeek(week) {
      switch (week) {
        case 1:
          return "星期一";
        case 2:
          return "星期二";
        case 3:
          return "星期三";
        case 4:
          return "星期四";
        case 5:
          return "星期五";
        case 6:
          return "星期六";
        case 7:
          return "星期日";
        default:
          return "";
      }
    },
  },
});

提姆寫程式

Vue 筆記 - 表格中放入七天日期實作

開發環境與使用技術

切好靜態版面

引入 Vue.js 並改寫 HTML

Demo

相關資源