<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" v-for="(item, index) in dayList" :key="index" :class="{ holiday: item.holiday }">
            <span>{{ item.date }}</span>
            <br />
            <span>{{ item.week }}</span>
          </th>
        </tr>
      </thead>
    </table>
  </div>
</div>

table {
  width: 100%;
  background-color: #fff;
  th {
    vertical-align: middle;
    text-align: center;
  }
}

.holiday {
  background-color: #f4511e;
  color: #fff;
}

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 "";
        }
      },

    }
  })