vue 過濾器filter的詳解

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 的值作為第三個參數。