Vue2 过滤器 Filters

提示：Vue 过滤器是用于格式化文本的 JavaScript 函数，通过管道符 | 在模板中使用

---

前言

提示：这里可以添加本文要记录的大概内容：

过滤器（Filters）是 Vue 2 中用于 格式化文本 的特殊功能，主要用于：

1. 数据展示的二次处理
   将原始数据转换为更友好的显示格式（如日期格式化、货币符号添加等）
2. 解耦模板逻辑
   避免在模板中直接编写复杂的处理逻辑，保持模板简洁
3. 复用格式化规则
   同一过滤器可在多个组件或不同位置重复使用

---

过滤器的核心特性

1. 链式调用

{{ message | filterA | filterB }}

• 数据依次通过 filterA → filterB 处理
• 示例：{{ price | currency | decimal }}（先加货币符号，再保留小数）

2. 参数传递

{{ value | filter(arg1, arg2) }}

filters: {formatDate(value, separator = '-') {// 使用 separator 参数处理日期}
}

3. 纯函数特性

• 不能修改原始数据
• 必须返回处理后的值

---

过滤器的常见使用场景

1. 文本格式化

<!-- 案例中的状态映射 -->
<td>{{ status | statusFilter }}</td>

2. 数字处理

filters: {currency(value) {return `¥${value.toFixed(2)}`}
}

3. 日期/时间格式化

filters: {dateFormat(value) {return dayjs(value).format('YYYY-MM-DD HH:mm')}
}

4. 样式控制（结合组件）

<!-- 案例中的徽标颜色控制 -->
<a-badge :status="status | statusTypeFilter" />

5. 状态码转文字说明

filters: {orderStatus(code) {const statusMap = {0: '待支付',1: '已发货',2: '已完成',3: '已取消'}return statusMap[code] || '未知状态'}
}

<!-- 使用示例 -->
<a-tag>{{ 1 | orderStatus }}</a-tag>
<!-- 输出：已发货 -->

---

案例一

需求：显示用户信息时

• 手机号格式化为 138-1234-5678
• 金额显示为 ¥1,234.56
• 状态码显示为带颜色的徽标

实现：

<template><div><p>手机号：{{ mobile | phoneFormat }}</p><p>余额：{{ amount | currency }}</p><a-badge :status="status | statusTypeFilter":text="status | statusFilter"/></div>
</template><script>
export default {data() {return {mobile: '13812345678',amount: 1234.56,status: 'active'}},filters: {phoneFormat(value) {return value.replace(/(\d{3})(\d{4})(\d{4})/, '$1-$2-$3')},currency(value) {return '¥' + value.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,')},statusFilter(val) {const map = { active: '正常', frozen: '冻结' }return map[val] || '未知'},statusTypeFilter(val) {const map = { active: 'success', frozen: 'error' }return map[val] || 'default'}}
}
</script>

案例二

<!-- 在模板中使用过滤器的部分 -->
<template><!-- 表格中的状态列 --><a-table><!-- 其他列... --><template slot="status" slot-scope="status"><a-badge :status="status | statusTypeFilter"  <!-- 控制徽标颜色类型 -->:text="status | statusFilter"         <!-- 控制显示文本 -->/></template></a-table>
</template><script>
export default {// 过滤器定义部分filters: {// 状态转文本statusFilter(status) {const statusMap = {'agree': '成功','reject': '驳回'}return statusMap[status] || '未知状态'},// 状态转徽标类型statusTypeFilter(type) {const statusTypeMap = {'agree': 'success', // Ant Design 的成功状态（绿色）'reject': 'error'    // Ant Design 的错误状态（红色）}return statusTypeMap[type] || 'default'}}
}
</script>

以下是这段代码的 逐层解析说明：

---

模板部分（template）

<template><a-table><!-- 其他列省略... --><!-- 状态列 --><template slot="status" slot-scope="status"><a-badge :status="status | statusTypeFilter"  <!-- 绑定徽标颜色 -->:text="status | statusFilter"         <!-- 绑定显示文本 -->/></template></a-table>
</template>

1. <a-table> 组件

• Ant Design Vue 的表格组件，用于展示数据列表
• 此处省略了其他列，只保留关键的状态列

2. slot="status" 插槽

• 定义表格中名为 “status” 的列
• slot-scope="status"：获取当前行的状态值（从数据源中传递来的 agree 或 reject）

3. <a-badge> 徽标组件

• Ant Design 的徽标组件，用于显示状态标识
• 关键属性绑定：
  • :status：徽标的颜色类型（通过 statusTypeFilter 转换）
  • :text：显示的文本内容（通过 statusFilter 转换）

---

脚本部分（script）

<script>
export default {filters: {// 状态转文本过滤器statusFilter(status) {const statusMap = {'agree': '成功','reject': '驳回'}return statusMap[status] || '未知状态' // 兜底返回},// 状态转徽标类型过滤器statusTypeFilter(type) {const statusTypeMap = {'agree': 'success', // 对应 Ant Design 的绿色成功状态'reject': 'error'   // 对应 Ant Design 的红色错误状态}return statusTypeMap[type] || 'default' // 兜底返回}}
}
</script>

1. filters 选项

• Vue 2.x 的过滤器定义，用于格式化文本
• 包含两个自定义过滤器：statusFilter 和 statusTypeFilter

2. statusFilter 过滤器

• 作用：将原始状态码转换为中文文本
• 映射关系：

  'agree' → '成功'  // 表示操作成功'reject' → '驳回'  // 表示操作被拒绝

• 兜底处理：|| '未知状态' 防止未定义状态导致错误

3. statusTypeFilter 过滤器

• 作用：将原始状态码转换为 Ant Design 徽标类型
• 映射关系：

  'agree' → 'success'  // 显示绿色徽标'reject' → 'error'    // 显示红色徽标

• 兜底处理：|| 'default' 确保未知状态有默认显示

---

完整工作流程

1. 数据传递
   表格数据中的 status 字段（如 agree 或 reject） → 通过 slot-scope="status" 传递给过滤器

2. 过滤器处理

   • 通过 status | statusFilter 转换为中文文本
   • 通过 status | statusTypeFilter 转换为徽标类型

3. 最终渲染

   <!-- 当 status = 'agree' 时 --><a-badge status="success" text="成功" /><!-- 当 status = 'reject' 时 --><a-badge status="error" text="驳回" />

---

注意事项

1. 何时使用过滤器？

• 简单文本转换（如状态码转文字）
• 无副作用的数据格式化（如日期、货币）
• 需要链式处理（如先转大写再截断）

2. 何时不用过滤器？

• 需要响应式更新（过滤器不会随依赖变化自动更新）
• 复杂数据处理（应使用计算属性或方法）

3. 避免滥用

• 对于需要复用的复杂逻辑，建议封装为 工具函数 或 mixin
• 需要响应式更新时，优先使用 计算属性

4. 全局过滤器管理
   推荐在单独文件中集中管理：

// filters.js
export default {install(Vue) {Vue.filter('date', value => dayjs(value).format('YYYY-MM-DD'))}
}// main.js
import filters from './filters'
Vue.use(filters)

特性总结及分类

特性

特性	说明
双过滤器协作	一个控制文本，一个控制样式，实现展示与样式的解耦
防御性编程	使用 ll 运算符处理未定义状态，避免程序崩溃
Ant Design 整合	完美匹配 Ant Design 的 <a-badge> 组件状态类型（success/error）
可维护性	状态映射关系集中管理，后续新增状态只需修改 statusMap 对象

---

按作用范围分类

类型	定义方式	使用范围	示例
私有过滤器	在组件选项中定义 filters 属性	当前组件内有效	前述案例中的 statusFilter
全局过滤器	使用 Vue.filter() 注册	所有组件可用	Vue.filter('dateFormat', ...)

过滤器 vs 计算属性 vs 方法

特性	过滤器	计算属性	方法
主要用途	文本格式化	复杂数据派生	通用逻辑处理
缓存机制	无	有（依赖不变时缓存）	无
参数支持	支持	不支持	支持
模板中使用方式	{{ data | filter }}	{{ computedData }}	{{ method() }}

全局过滤器定义示例：

// main.js
Vue.filter('filterName', function(value) {if (!value) return ''return value.toString().toUpperCase()
})