過濾器

濾鏡可以用在兩個地方：雙花括號插值和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({
  // ...
})

當全域篩選器和局部篩選器重名時，會採用局部篩選器。

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

#過濾器函數總接收表達式的值(之前的操作鏈的結果) 作為第一個參數。在上述例子中，capitalize 篩選函數將會收到 message 的值作為第一個參數。

過濾器可以串聯：

{{ message | filterA | filterB }}

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

過濾器是 JavaScript 函數，因此可以接收參數：

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

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