vue官方文件：

Vue.js 允許你自定義過濾器，可被用於一些常見的文字格式化。過濾器可以用在兩個地方：雙花括號插值和v-bind表示式(後者從 2.1.0+ 開始支援)。過濾器應該被新增在 JavaScript 表示式的尾部，由“管道”符號指示：

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

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

你可以在一個元件的選項中定義本地的過濾器：

filters: {
  capitalize: 
 
function (value) {
    if (!value) return ''
    value = value.toString()
    return value.charAt(0).toUpperCase() + value.slice(1)
  }
}

或者在建立 Vue 例項之前全域性定義過濾器：

Vue.filter('capitalize', function (value) {
  if (!value) return ''
  value = value.toString()
  return value.charAt(0).toUpperCase() + value.slice(1)
})

 
new Vue({
  // ...
})

當全域性過濾器和區域性過濾器重名時，會採用區域性過濾器。

例子：

（1）下面這個例子用到了capitalize過濾器：

（2）過濾器可以串聯：

{{ message | filterA | filterB }}

在這個例子中，filterA被定義為接收單個引數的過濾器函式，表示式message的值將作為引數傳入到函式中。然後繼續呼叫同樣被定義為接收單個引數的過濾器函式filterB，將filterA的結果傳遞到filterB中。

（3）過濾器是 JavaScript 函式，因此可以接收引數：

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

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