會不會，我們以後都會被 clone 老闆就不用請人了？ 月球漫遊

有時我們拿到一包資料，需要透過過濾器來拿到我們想要的資料格式。例如我們可以透過一些外來的函式庫，拿到一些資料，但如果想依照我們想要的格式顯示，就必須過濾我們要的資訊，再依我們用的函式庫規則，寫成想要顯示的格式。

先來 Codepen 看一下效果 Vue.Js Filters 過濾器

什麼是過濾器

過濾器的功能是要對顯示的資料進行特定的格式化後再顯示，且過濾器並不會去改變原本的資料，而是產生一個新的對應的資料格式。

白話一點就是「過濾器」主要的功能是將我們想要的資料，進行格式化。例如我們想要依照我們想要的格式來顯示日期。在程式裡取得的時間是透過從 1970 年 1 月 1 日所開始計算的時間差而來，透過程式拿到的現在時間必須經過一些步驟的運算，才能得到當下點的時間。

因為有時差、時區與冬夏令時間的問題，所以要得到我們想要的時間點變得有些複雜，也因此在處理「時間」格式時，會偏向引入已經把繁複計算包成函式庫的方式來操控時間與日期的部分。

在這裡我們以moments.js為例，這支函式庫在處理時間的顯示上非常方便，所以許多人引入它來直接使用(可惜九月宣佈停止開發，進入維護狀態)。

使用外來的函式庫，可以使用 CDN 的方式，或者透過npm安裝到我們的專案裡，記得如果我們的 Vue 也是以 CDN 的方式引入，要將外來的 CDN 排在 Vue 之後。

我們可以先創建一個由建構是得來的new Data()，將其存在time裡，試著在頁面上顯示它，會得到「Sun Feb 23 2020 11:26:19 GMT+0100 (中歐標準時間)」，但這並不是我們想顯示的時間格式，我們想顯示的是像「2020-02-23, 13:10:20」的格式。

可先去 Moment.js的官網查找使用規則。

如何自定義與使用過濾器

我們先來看一下定義與使用過濾器的公式

// 使用過濾器
<div>{{ myData | filterName }}</div>
<div>{{ myData | filterName(arg) }}</div>

使用過濾器的方式是，假設我們已經有個日期myData，後面需指定一個過濾函式filterName，這個函式會接受表達式myData的值，再回傳一個新的值。 新的值則是我們想要的資料格式。

// 定義過濾器（在vue 實例外定義）
 Vue.filter(filterName, function(value[,arg1,arg2,...]){
   // 進行一定的資料處理
   return newValue
   })

引入之後要先做定義過濾器的動作，透過Vue.filter()的函式物件filter('自定義過濾器名稱', callback回調函式)指定。回調函式裡的value指的是將要被格式化的值，也就是範例裡到time的值，最後過濾器會回傳一個新的值。這個值就是我們希望的格式。

實作

HTML 部分

<div id="app">
  <h3>顯示格式化的日期和時間</h3>
  <p>{{ time }}</p>
  <p>完整格式：{{ time | timeString }}</p>
  <p>年月日：{{ time | timeString('YYYY-MM-DD') }}</p>
  <p>時分秒：{{ time | timeString('HH:mm:ss') }}</p>
  <p>沒有指定：{{ time | timeString() }}</p>
</div>

JavaScript 與 Vue 實例部分

callback 回調函式的參數：參數 1.原本的格式 2.希望的格式，如果沒給第二個參數就會使用原本的。

回傳的format:
format(ˋ 如果有給值就用 myFormat || 不然就用我們設定的'YYYY-MM-DD, HH:mm:ss')。

// 定義過濾器
Vue.filter('timeString', function (value, myFormat) {
  return moment(value).format(myFormat || 'YYYY-MM-DD, HH:mm:ss');
});

const vm = new Vue({
  el: '#app',
  data: {
    // 建構式取得現在時間
    time: new Date(),
  },
  methods: {},
});

參考：
過濾器 — Vue.js

每日一句法文有益身心：J'ai grossis ! --> 姐.勾齁西！ --> 我胖了！