關於
Vue.js 允許你自定義過濾器，可被用於一些常見的文本格式化。過濾器可以用在兩個地方：雙花括號插值和
v-bind表達式 (后者從 2.1.0+ 開始支持)。過濾器應該被添加在 JavaScript 表達式的尾部，由“管道”符號指示。
即過濾器是用來格式化數據的一個函數。過濾器不會修改原始數據，它的作用是過濾數據，就是對數據進行加工處理並返回處理后的數據，比如做一些數據格式上的修改，狀態轉換等。
過濾器分為兩種
-
組件內的過濾器(組件內有效)
-
全局過濾器(所有組件共享)
定義過濾器
-
第一個參數是過濾器的名字
-
第二個參數是過濾器的功能函數 (若不定義vue就不知道這個字符串是什么，有什么作用)。
過濾器的功能函數
-
聲明
function(data,argv1,argv2...){}
-
第一個參數是傳入的要過濾的數據，即調用時管道符左邊的內容。
-
第二個參數開始往后就是調用過濾器的時候傳入的參數。
-
過濾器的使用
-
先注冊，后使用
-
組件內
filters:{ 過濾器名: fn }fn 內通過 return 返回最終的數據 -
全局
Vue.filter('過濾器名',fn)fn 內通過 return 返回最終的數據
-
使
// 使用過濾器時需要添加管道符號（ | ）作為分隔，管道符 | 右邊是過濾器名稱，即文本的功能函數 <!-- 在雙花括號中 --> {{ message | 過濾器名稱 }} <!-- 在 `v-bind` 中 --> <div v-bind:id="id | 過濾器名稱"></div>
自定義全局過濾器
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 也不報錯，但是過濾器是沒有效果的。
-
當全局過濾器和局部過濾器名字重復的時候，會以就近原則進行調用，即：局部過濾器優先於全局過濾器被調用
-
一個表達式可以使用多個過濾器，其執行順序從左往右，前一個過濾器的結果作為后一個過濾器的被處理數據，所以要注意使用順序
熟悉 vue 的童鞋會知道，過濾器有時同methods、computed、watch一樣可以達到處理數據的目的，但又不能替代它們，因為它不能改變原始值。如果一個過濾器的內部特別復雜，可以考慮把它寫成一個計算屬性，因為計算屬性本身帶有緩存，可復用性強，而過濾器一般用來做一些簡單的操作。
在實際開發中，全局的過濾器要比局部過濾器使用的更廣泛一些，說白了我們為什么要使用過濾器，其實就跟使用函數是一樣，把一些方法封裝，供其它組件使用，這樣調用起來更方便也更快捷。
大家知道全局過濾器是在 main.js 中定義的，但萬一項目過大，有多個過濾器，那 main.js 就一堆代碼，為了項目模塊化，最好是有專門的目錄來統一存放這些過濾器，然后把處理函數給抽離出去，放在一個.js文件中，下邊通過示例代碼展示。
示例一（局部過濾器）：
格式化時間或日期，補全指定位數，不足個位數補0
// filter/index.js文件 export default { dateFormat: value => { const dt = new Date(value * 1000) const y = dt.getFullYear() const m = (dt.getMonth() + 1 + '').padStart(2, '0') // .padStart(指定位數，"要補全的符號或值") const d = (dt.getDay() + '').padStart(2, '0') const hh = (dt.getHours() + '').padStart(2, '0') const mm = (dt.getMinutes() + '').padStart(2, '0') const ss = (dt.getSeconds() + '').padStart(2, '0') return `${y}-${m}-${d} ${hh}:${mm}:${ss}` } } // 在 .vue 文件中使用局部過濾器 <script> import filters from '../filter' export default { ... ... filters: { ...filters }, data() { return {} } } </script> <div> 日期：{{ date | dateFormat }} </div>
示例二（全局過濾器）：
通用字典項的回顯：比如性別男女或通用選擇是否，后端傳給我們的數據是0、1，我們需要在頁面上顯示男女或是否
// constants/dictionary.js 文件 export const GENDER_MENU = [ { code: 0, label: '男'}, { code: 1, label: '女'} ]; export const COMMON_MENU = [ { code: 0, label: '否'}, { code: 1, label: '是'} ]; export default { GENDER_MENU, COMMON_MENU }
filter / dict.js 文件
// filter/dict.js 文件 import Dict from '../constants/dictionary' export const genderMenu = { func: value => { const target = Dict.GENDER_MENU.filter(item => { return item.code = value; }) return target.length ? target[0].label : value; } } export const commonMenu = { func: value => { const target = Dict.COMMON_MENU.filter(item => { return item.code = value; }) return target.length ? target[0].label : value; } }
filter / index.js 文件
// filter/index.js 文件 import * as filters from './dict' // 導入過濾函數 const Install = Vue => { // 導入的 filters 是一個對象，使用Object.keys()方法，得到一個由key組成的數組，遍歷數據，讓key作為全局過濾器的名字，后邊的是key對應的處理函數，這樣在任何一個組件中都可以使用全局過濾器了 Object.keys(filters).forEach(key => { Vue.filter(key, filters[key].func) }) /* for(const _filter in filters) { Vue.filter(`${_filter}`, filters[_filter].func) } */ } export default Install
main.js 文件
// main.js 文件 ... ... import filters from './../filter/index' Vue.use(filters) ... ...
在.vue 文件中使用全局過濾器
// .vue 文件中使用全局過濾器 <p>性別：{{ gender | genderMenu }}</p>