平時開發中，需要用到過濾器的地方有很多，比如單位轉換、數字打點、文本格式化等，比如：
Vue.filter('toThousandFilter', function (value) { if (!value) return '' value = value.toString() return .replace(str.indexOf('.') > -1 ? /(d)(?=(d{3})+.)/g : /(d)(?=(?:d{3})+$)/g, '$1,') })
實現效果：
30000 => 30,000
當然這只是常規用法，沒什麼好說的。下面來說一個我在開發中遇到的一個需要用到串聯過濾器的使用場景。
假設需要獲取一個訂單列表，其中的每一項的 status 字段用來表示訂單狀態：
{ id: '', order_num: '123456789', goodList: [ ... ], address: { ... }, status: 1 // 1 待付款 2 待發貨 3 待收貨 }
那我們拿到這個數據在，v-for 的時候，肯定會這樣做：
這樣，表示狀態的 1， 2， 3 就變成了 待付款，待發貨，待收貨。這沒有什麼問題。但是，需求來了，當訂單未付款時，表示狀態的文字應該為紅色。就是當狀態為 待付款 時，文字要為紅色！這個問題曾經困擾了有一段時間，用了各種辦法，雖然也是實現了需求，但終歸不太優雅。直到最近在翻看 vue 文檔，才想起來有串聯過濾器的用法，可以完美解決這個需求，上碼：
就這麼簡單。
關於過濾器，這裡還有幾點要注意的：
過濾器必須是個純函數
過濾器中拿不到 vue 實例，這是 vue 故意這麼做的
在全局註冊過濾器是用 Vue.filter()，局部則是 filters: {}
在方法中調用過濾器方法為： this.$options.filters.XXX
[kyec555 ] 詳解Vue串聯過濾器的使用場景已經有428次圍觀
