使用方式：

<!-- 在雙花括號中 -->
{{ message | formatDate }}

<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatDate"></div>

那麼，我們該如何去寫過濾器呢？接下來我們假定一種場景，後端返回的一個 時間列表大概是長下邊這樣的：

[
    {time: 1533527037000},
    {time: 1533527037000},
    {time: 1533527037000}
]

可以看到這個陣列中有三個資料，分別是三個時間戳，如果沒有過濾器，我們只能用普通的方式，迴圈這個陣列，將每一項的時間戳轉換為具體的事件。但是，vue提供的過濾器可以幫我們很好的解決這種問題。接下來我們看如何去使用過濾器解決。

首先定義過濾器有兩種方式，第一種是全域性過濾器，我們可以直接在vue物件上使用filter方法註冊過濾器，這種全域性註冊的過濾器在任何一個元件內都可以使用。第二種則是元件內部的過濾器，註冊元件內部過濾器則只能在當前元件內使用，接下來我們使用這兩種方式註冊過濾器函式。

全域性過濾器:

import Vue from 'vue';
Vue.filter('formatTime', function (val) {
  const date = new Date(val);
  const hour = date.getHours();
  const minutes = date.getMinutes();
  const seconds = date.getSeconds();
  return `${hour} : ${minutes} : ${seconds}`;
});
 

區域性元件過濾器(區域性過濾器直接在元件內寫即可)：

export default {
    name: 'FilterDemo',
    /* 區域性過濾器 */
    filters: {
      /* 格式化時間戳 */
      formatDate (val) {
        const date = new Date(val);
        const year = date.getFullYear();
        const month = date.getMonth() > 9 ? date.getMonth() + 1 : `0${date.getMonth() + 1}`;
        const day = date.getDate() > 9 ? date.getDate() + 1 : `0${date.getDate() + 1}`;
        return `${year}-${month}-${day}`;
        console.log(val);
      }
    },
    data () {
      return {

      }
    }
    
  }
 

ok，接下來我們看下如何來使用：

<template>
  <div>
    <h2>vue過濾器:</h2>
    <!-- 區域性過濾器 -->
    <p><b>{{ 1533527037000 | formatDate }}</b></p>
    <!-- 全域性過濾器 -->
    <p><b>{{ 1533527037000 | formatTime }}</b></p>
  </div>
</template>

在元件裡，按照文章開頭說的兩種方式即可，注意元件內註冊的過濾器(這裡是formatDate)只能在當前元件內部使用。