過濾器

Vue.js 允許你自定義過濾器，可被用于一些常見的文本格式化。

過濾器可以用在兩個(gè)地方：雙花括號插值和 v-bind 表達(dá)式 (后者從 2.1.0+ 開始支持)。過濾器應(yīng)該被添加在 JavaScript 表達(dá)式的尾部，由“管道”符號指示：

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

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

你可以在一個(gè)組件的選項(xiàng)中定義本地的過濾器：

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

或者在創(chuàng)建 Vue 實(shí)例之前全局定義過濾器：

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

當(dāng)全局過濾器和局部過濾器重名時(shí)，會采用局部過濾器。

下面這個(gè)例子用到了 capitalize 過濾器：

過濾器函數(shù)總接收表達(dá)式的值 (之前的操作鏈的結(jié)果) 作為第一個(gè)參數(shù)。在上述例子中，capitalize 過濾器函數(shù)將會收到 message 的值作為第一個(gè)參數(shù)。

過濾器可以串聯(lián)：

{{ message | filterA | filterB }}

在這個(gè)例子中，filterA 被定義為接收單個(gè)參數(shù)的過濾器函數(shù)，表達(dá)式 message 的值將作為參數(shù)傳入到函數(shù)中。然后繼續(xù)調(diào)用同樣被定義為接收單個(gè)參數(shù)的過濾器函數(shù) filterB，將 filterA 的結(jié)果傳遞到 filterB 中。

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

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

這里，filterA 被定義為接收三個(gè)參數(shù)的過濾器函數(shù)。其中 message 的值作為第一個(gè)參數(shù)，普通字符串 'arg1' 作為第二個(gè)參數(shù)，表達(dá)式 arg2 的值作為第三個(gè)參數(shù)。