[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]) }) ```