<div id="app">
  <div class="container-fluid">
    <!-- nav -->
    <section>
      <nav class="nav nav-pills nav-fill">
        <a class="nav-item nav-link" href="#" :class="{active:range ==-1}" @click.prevent="getArea(-1)">全部</a>
        <a class="nav-item nav-link" href="#" :class="{active:range == 0}" @click.prevent="getArea(0)">北部</a>
        <a class="nav-item nav-link" href="#" :class="{active:range == 1}" @click.prevent="getArea(1)">中部</a>
        <a class="nav-item nav-link" href="#" :class="{active:range == 2}" @click.prevent="getArea(2)">南部</a>
        <a class="nav-item nav-link" href="#" :class="{active:range == 3}" @click.prevent="getArea(3)">東部</a>
        <a class="nav-item nav-link" href="#" :class="{active:range == 4}" @click.prevent="getArea(4)">外島</a>
      </nav>
    </section>

    <!-- table -->
    <section>
      <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">時間</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>
          <tbody v-for="(item,index) in cities" :key="index">
            <tr>
              <th>
                {{ item.locationName }}
              </th>
            </tr>

          </tbody>
        </table>
      </div>
    </section>
  </div>
</div>

.nav {
  margin-bottom: 1%;
  .nav-item {
    background-color: #fff;
    border: 1px solid #ccc;
    color: #333;
    transition: all 0.2s;
    margin-top: 1rem;
    & .active {
      background-color: #28a745;
      color: #fff;
    }
  }
}
table {
  width: 100%;
  background-color: #fff;
  th {
    vertical-align: middle;
    text-align: center;
  }
}

.holiday {
  background-color: #f4511e;
  color: #fff;
}
View Compiled
let weather =
    "https://opendata.cwb.gov.tw/api/v1/rest/datastore/F-D0047-091?Authorization=CWB-08737147-8E37-4BCD-8118-2014EF09BC45&elementName=MinT,MaxT,T,Wx";

  let vm = new Vue({
    el: '#app',
    data: {
      weatherItems: [],
      dayList: [],
      cities: [],
      area: [
        ["臺北市", "新北市", "桃園市", "基隆市"],
        ["臺中市", "新竹縣", "新竹市", "苗栗縣", "彰化縣", "南投縣"],
        ["臺南市", "高雄市", "雲林縣", "嘉義縣", "嘉義市", "屏東縣"],
        ["宜蘭縣", "花蓮縣", "臺東縣"],
        ["金門縣", "澎湖縣", "連江縣"],
      ],
      range: -1,
      active: false,
    },
    created() {
      this.getApi();
    },
    methods: {
      getApi() {
        axios.get(weather).then((res) => {
          this.weatherItems = res.data.records.locations;
          // console.log(this.weatherItems);
          this.getData();
        });
      },
      getArea(index) {
        this.range = index;
        this.getData();
      },
      getData() {
        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,
          });
        }
        //取城市
        this.cities = [];
        let locations = this.weatherItems[0].location;
        let location2 = [];
        //縣市標籤
        if (this.range != -1) {
          let assignArea = this.area[this.range];
          location2 = locations.filter((element) =>
            assignArea.indexOf(element.locationName) >= 0
          );
        } else {
          location2 = locations;
        }

        location2.forEach(item => {
          this.cities.push({
            locationName: item.locationName
          })
        })
      },
      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 "";
        }
      },

    }
  })

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.1/axios.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js
  3. https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js