vue 過濾器filter的詳解

https://www.cnblogs.com/panax/p/10824594.html

1.程式碼運用的地方

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

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

2.場景： 時間格式的轉化

3.註冊過濾器函式

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

// 全域性函式

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

})

元件內：

4.過濾器可以串聯：

{{ message | filterA | filterB }}

5. 接收引數

{{ message | filterA('arg1', arg2) }}

filterA被定義為接收三個引數的過濾器函式。其中message的值作為第一個引數，普通字串'arg1'作為第二個引數，表示式arg2的值作為第三個引數。