情境：我的專案有活動紀錄，格式為json，本來的網頁非常的土法煉鋼，還沒到來的活動日期就在上方，過期的活動在下方。有一天我突然懶惰了(?)希望可以自動抓取今天日期判斷是否過期

前置作業

使用框架：vue 3 composition API

活動紀錄的json：內容包含

title, date, place

當中date的日期格式為yyyy-mm-dd

獲取日期

使用new Date()就可以獲取當前時間(包含年月日與時間)

接著用.toISOString這個語法轉譯一下格式

參考MDN

const event = new Date("05 October 2011 14:48 UTC");
console.log(event.toString());
// Expected output: "Wed Oct 05 2011 16:48:00 GMT+0200 (CEST)"
// Note: your timezone may vary

console.log(event.toISOString());
// Expected output: "2011-10-05T14:48:00.000Z"

因為我要的只有前十碼，再套用slice把字串切掉就可以了

最後語法如下

const today = new Date().toISOString().slice(0, 10)

判斷檔案中的活動是否過期

我們使用computed這個語法：computed最大的特徵就是會回傳一個值，同時資料有變動的時候也會響應

搭配filter過濾資料，獲取日期大於或等於今天

//導入的資料為jsonData

const filteredData = computed(() => {
  return jsonData.filter(item => item.date >= today)
})

最後在模板中使用 v-if判定是否有資料，避免渲染錯誤

    <ul v-if="filteredData.length">
      <li v-for="item in filteredData" :key="item.id">
        {{ item.name }} - {{ item.date }}
      </li>
    </ul>

同步加映：

格式化日期的套件

VueUse

Day.js