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)

特性总结及分类

特性

按作用范围分类

过滤器 vs 计算属性 vs 方法

全局过滤器定义示例：

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