Vue.js 是一個很好的前端框架，提供了很多便捷的功能，filter 就是其中之一。Filter 方法可以在編寫 Vue.js 應用程序時重新格式化文本、日期和數字。我們可以通過Vue.filter()方法添加 filter。

//注意：過濾器本質上就是一個函數，所以可以接受參數
Vue.filter('money', function(value, symbol) {
return symbol + value.toFixed(2);
});
//使用{{value|money('￥')}}

此外，還有一些內置的 filter 可以使用，如：

• {{ message | capitalize }}—— Capitalize the first letter of the string.
• {{ message | uppercase }}—— Capitalize all letters of the string.
• {{ message | lowercase }}—— Lowercase all letters of the string.
• {{ message | currency }}—— Format a number into a currency format.
• {{ message | pluralize }}—— Pluralize a word based on a number.
• {{ message | truncate }}—— Truncate a long string to a specific number of words.
• ...

將 filter 與 Vuex store 搭配使用也很方便，如下面代碼所示：

// store.js
const store = new Vuex.Store({
state: {
all: [...]
},
getters: {
filterByStatus(state) {
return function(status) {
return state.all.filter(item =>item.status === status);
}
}
}
});
//使用
<div v-for="item in $store.getters.filterByStatus('pending')">
{{ item }}
</div>

總之，filter 可以幫我們在視圖層的處理一些簡單的邏輯，優化開發和維護工作，學習起來也并不復雜，平時寫項目時可以多加嘗試使用。