VUE組件使用filter是一個(gè)非常方便的功能，它可以處理過濾數(shù)據(jù)和改變數(shù)據(jù)的顯示方式。你可以利用它對(duì)數(shù)組和字符串進(jìn)行操作，幫助你更快速、簡(jiǎn)便地完成一系列邏輯處理。

// 注冊(cè)一個(gè)名為 reverseCurrency 的過濾器
Vue.filter('reverseCurrency', function(value) {
// 確保數(shù)值保留兩位小數(shù)并以 $ 結(jié)尾
return value.toFixed(2) + '$'
})

過濾器需要在 Vue 實(shí)例中使用filters選項(xiàng)指定。

{{ price | reverseCurrency }}

你可以在應(yīng)用的任何地方使用標(biāo)記語(yǔ)法調(diào)用一個(gè)過濾器。

你還可以利用過濾鏈來避免過濾器代碼的重復(fù)，將多個(gè)過濾器串聯(lián)在一起。串聯(lián)順序從左到右應(yīng)用過濾器。

{{ price | formatPrice | reverseCurrency }}

在這種情況下，formatPrice 過濾器將為價(jià)值添加一個(gè)￥符號(hào)，并且 reverseCurrency過濾器將價(jià)值四舍五入到兩個(gè)小數(shù)位并添加一個(gè)美元符號(hào)。

在過濾器中使用方法也是可能的。這種情況下，你需要提供一個(gè)函數(shù)，函數(shù)的第一個(gè)參數(shù)是 value。

{{ price | addTax(0.07) | reverseCurrency }}

在這個(gè)例子中，addTax 計(jì)算指定稅率（0.07）下的價(jià)格（123）。過濾器函數(shù)定義了一個(gè)額外的稅率參數(shù)，它將傳遞到過濾器的用途中。

過濾器適用于組件中的任何屬性，這意味著你可以對(duì)任何值應(yīng)用過濾器。過濾器也適用于v-bind表達(dá)式。

你也可以在 Vue.component 中使用過濾器：

Vue.component('my-component', {
props: ['message'],
template: '
{{ message | capitalize }}
',
filters: {
capitalize: function(value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}
})

在組件和模板作用域內(nèi)使用的過濾器是不同的。在組件的模板和 JS 中注冊(cè)或接觸注冊(cè)的過濾器。而在全局模板中注冊(cè)的過濾器會(huì)添加到每個(gè)組件的模板中。