[TOC] #### 1. 過(guò)濾器介紹 --- Vue2 支持自定義過(guò)濾器，可被用于一些常用的文本格式化。需要注意的是在 Vue3 中已經(jīng)不支持過(guò)濾器 過(guò)濾器可以用在兩個(gè)地方：**雙花括號(hào)插值** 和 **v-bind 表達(dá)式** 過(guò)濾器應(yīng)被添加在 JavaScript 表達(dá)式的尾部，使用 “管道符號(hào)” 指示： ``` <!-- 在雙花括號(hào)中 --> {{ message | capitalize }} <!-- 在 `v-bind` 中 --> <div v-bind:id="rawId | formatId"></div> ``` #### 2. 局部過(guò)濾器 --- **局部過(guò)濾器** 可以在組件的 filters 選項(xiàng)中定義過(guò)濾器，稱(chēng)為 **局部過(guò)濾器** ``` {{ name | case }} filters: { case(val) { return val.toUpperCase(); }, } ``` **過(guò)濾器串聯(lián)** **過(guò)濾器傳參** #### 3. 全局過(guò)濾器 --- 當(dāng)全局過(guò)濾器和局部過(guò)濾器重名時(shí)，會(huì)采用局部過(guò)濾器 在創(chuàng)建 Vue 實(shí)例之前可以注冊(cè)全局過(guò)濾器，全局過(guò)濾器在所有組件中都可以使用 ```javascript Vue.filter('lower', val => { return val.toLowerCase() }) ``` #### 4. 注冊(cè)全局過(guò)濾器 --- 項(xiàng)目根目錄下創(chuàng)建文件: `filters/index.js`，文件內(nèi)容: ```javascript export default { hotHandle() {}, formatTime() {} } ``` 在 `main.js` 中導(dǎo)入并注冊(cè)方法為全局過(guò)濾器 ``` import filters from './filters'; Object.keys(filters).forEach(key => { Vue.filter(key, filters[key]) }) ```