過濾器是Vue.js中的一種功能，它讓我們可以對模板插值中使用的值應用格式化和轉換。
過濾器是由Vue組件提供的一種功能，它允許您對模板動態數據的任何部分應用格式化和轉換。
它們不會更改組件數據或其他任何內容，但它們只會影響輸出。
舉個例子，假設您要打印一個名字：
<template>
<p>嗨 {{ name }}！</p>
</template>
<script>
export default {
data() {
return {
name: 'Flavio'
}
}
}
</script>
如果您想要檢查name是否包含值，如果沒有則打印“there”，這樣我們的模板將打印“嗨 there！”，該怎麼辦呢？
輸入過濾器：
<template>
<p>嗨 {{ name | fallback }}！</p>
</template>
<script>
export default {
data() {
return {
name: 'Flavio'
}
},
filters: {
fallback: function(name) {
return name ? name : 'there'
}
}
}
</script>
注意使用過濾器的語法，即| 過濾器名稱。如果您熟悉Unix，這就是Unix管道運算符，它用於將操作的輸出作為輸入傳遞給下一個操作。
組件的filters屬性是一個對象。單個過濾器是一個接受值並返回另一個值的函數。
返回的值是實際在Vue.js模板中打印的值。
當然，該過濾器可以訪問組件的數據和方法。
過濾器的一個好的使用案例是什麼？
- 轉換字符串，例如使其變大寫或變小寫
- 格式化價格
上面您看到了一個簡單的過濾器示例：{{ name | fallback }}。
過濾器可以串聯，通過重複使用管道語法：
{{ name | fallback | capitalize }}
這首先應用“fallback”過濾器，然後應用“capitalize”過濾器（我們沒有定義它，但您可以嘗試創建一個！）。
高級過濾器還可以使用正常的函數參數語法接受參數：
<template>
<p>你好 {{ name | prepend('Dr.') }}</p>
</template>
<script>
export default {
data() {
return {
name: 'House'
}
},
filters: {
prepend: (name, prefix) => {
return `${prefix} ${name}`
}
}
}
</script>
如果您向過濾器傳遞參數，則傳遞給過濾器函數的第一個參數總是模板插值中的項目（在這種情況下是name），其後是您傳遞的顯式參數。
您可以使用逗號分隔它們來使用多個參數。
請注意我使用了箭頭函數。通常情況下，我們不在方法和計算屬性中使用箭頭函數，因為它們幾乎總是引用this以訪問組件數據，但在這種情況下，過濾器不需要訪問this，而是通過參數接收了所需的所有數據，因此我們可以安全地使用更簡單的箭頭函數語法。
此套件里有很多預製過濾器供您在模板中直接使用，包括capitalize，uppercase，lowercase，placeholder，truncate，currency，pluralize等等。