Vue.js Filters 過濾器

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

什麼是過濾器

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

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

要注意的是過濾器只能在雙花括號的插值和表達式的v-bind時使用。

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

在這裡我們以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的官網查找使用規則。

過濾器呼叫時候的使用

當我們在使用大花括號的時候，如果需要特別處理包裹在大花括號裡的文字，可使|分隔，之後寫上過濾器的名稱，Vue 會先使用過濾器處理文字，再把處理過的值給予大花括號裡的變數。

如何自定義與使用過濾器

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

1
2
3

// 使用過濾器
<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: {},
});

過濾器也可以用正則和帶參數

替代部分文字

<div id="app">
  <h3>{{ msg | changeText('嬰孩') }}</h3>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js"></script>
<script>
  // 定義全域過濾器，也可帶參數
  Vue.filter('changeText', function (text, arg2) {
    // 字串的replace方法只會取代一次，第一個參數除了可寫一個字串外，也可定義一個正則式
    return text.replace(/年輕/g, arg2);
  });
  const vm = new Vue({
    el: '#app',
    data: {
      msg: '年輕的人最有活力，年輕是美好的，年輕就是本錢。',
    },
    methods: {},
  });
  </script>

今天就先介紹到這邊囉。