[TOC] #### 1. 过滤器介绍 --- Vue2 支持自定义过滤器，常用于文本的格式化。（特别注意: 在 Vue3 中已经不支持过滤器的用法） 过滤器可以用在两个地方：`双花括号插值` 和 `v-bind 表达式` 过滤器方法应被添加在 JavaScript 表达式的尾部，通过 “管道符号” 调用： ```html <!-- 在双花括号中 --> {{ message | capitalize }} <!-- 在 v-bind 中 --> <div v-bind:id="time | formatTime"></div> <!-- 项目场景：给图片地址拼接域名前缀 --> <u-image :src="user.avatar | domain" width="72rpx" height="72rpx" /> ``` #### 2. 局部过滤器 --- ##### 基础用法 在组件的 filters 选项中定义过滤器，称为 `局部过滤器`，该过滤器只能在当前组件内部使用 ```javascript export default { filters: { case(value) { return value.toLowerCase() } } } ``` ##### 过滤器传参 过滤器也是函数，当然也支持传递参数，像调用普通函数一样传递参数即可 ````html <!-- 不传参数 --> <view>{{ time | format }}</view> <!-- 传递参数 --> <view>{{ time | format('YYYY-MM-DD') }}</view> ```` ```javascript export default { filters: { format(value, string = 'YYYY-MM-DD HH:mm:ss') { return moment(value).format(string) } } } ``` ##### 过滤器串联 过滤器支持连用，也就是上一个过滤器的结果后还可以继续使用过滤器，也称为 `过滤器连用` ``` <view>{{ score | filter1 | filter2 }}</view> ``` #### 3. 全局过滤器 --- 当全局过滤器和局部过滤器重名时，会采用局部过滤器 全局过滤器: 在创建 Vue 实例之前可以注册全局过滤器，全局过滤器在所有组件中都可以使用 ```javascript // 注册全局过滤器 Vue.filter('lower', val => val.toLowerCase()) // 创建 Vue 示例 const app = new Vue({ ...App }) ``` #### 4. 过滤器封装 --- 实际开发中，我们会详细划分每个目录的作用，在项目根目录创建 `filters` 目录，用于存放全局过滤器 第一步：在项目根目录下创建文件: `filters/index.js`，用于存放全局过滤器方法 ```javascript export default { domain() { }, formatTime() { } } ``` 第二步：在项目根目录下的 `main.js` 中导入过滤器文件，并将文件中的所有方法注册为全局过滤器 ```javascript import filters from './filters'; Object.keys(filters).forEach(key => Vue.filter(key, filters[key])) ```