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