即過濾器是用來格式化數據的一個函數。過濾器不會修改原始數據，它的作用是過濾數據，就是對數據進行加工處理并返回處理后的數據，比如做一些數據格式上的修改，狀態轉換等。

過濾器分為兩種

組件內的過濾器(組件內有效)

全局過濾器(所有組件共享)

定義過濾器

第一個參數是過濾器的名字
第二個參數是過濾器的功能函數 (若不定義vue就不知道這個字符串是什么，有什么作用)。

過濾器的功能函數

聲明 function(data,argv1,argv2…){}

第一個參數是傳入的要過濾的數據，即調用時管道符左邊的內容。
第二個參數開始往后就是調用過濾器的時候傳入的參數。

先注冊，后使用

組件內 filters:{ 過濾器名: fn } fn 內通過 return 返回最終的數據
全局 Vue.filter(‘過濾器名’,fn) fn 內通過 return 返回最終的數據
使用 {{ 數據 | 過濾器名 }}

全局

Vue.filter('過濾器名稱', function(val) { // val表示要被處理的數據// 過濾器業務邏輯，要有返回值
})
?
<div>{{ msg | 過濾器名稱 }}</div>
<div v-bind="msg | 過濾器名稱"></div>

局部

data () {return {msg: 'hello world'}
},
//定義私用局部過濾器。只能在當前 vue 對象中使用
filters: {dataFormat: (msg, a) => { // msg表示要過濾的數據，a表示傳入的參數return msg + a;}
}
?
<p>{{ msg | dataFormat('!')}}</p> // 結果: hello world!

注意事項

• 全局注冊時是 filter 沒有 s ， 而組件過濾器是 filters，是有 s 的，雖然寫的時候沒有 s 也不報錯，但是過濾器是沒有效果的。
• 當全局過濾器和局部過濾器名字重復的時候，會以就近原則進行調用，即：局部過濾器優先于全局過濾器被調用
• 一個表達式可以使用多個過濾器，其執行順序從左往右，前一個過濾器的結果作為后一個過濾器的被處理數據，所以要注意使用順序