当前位置: 首页 > news >正文

Vue2 过滤器 Filters

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

文章目录

  • 前言
  • 过滤器的核心特性
    • 1. 链式调用
    • 2. 参数传递
    • 3. 纯函数特性
  • 过滤器的常见使用场景
    • 1. 文本格式化
    • 2. 数字处理
    • 3. 日期/时间格式化
    • 4. 样式控制(结合组件)
    • 5. 状态码转文字说明
  • 案例一
    • 需求:显示用户信息时
    • 实现:
  • 案例二
    • 模板部分(template)
    • 脚本部分(script)
    • 完整工作流程
  • 注意事项
    • 特性总结及分类
    • 全局过滤器定义示例:


前言

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

过滤器(Filters)是 Vue 2 中用于 格式化文本 的特殊功能,主要用于:

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

过滤器的核心特性

1. 链式调用

{{ message | filterA | filterB }}
  • 数据依次通过 filterAfilterB 处理
  • 示例:{{ 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 的表格组件,用于展示数据列表
  • 此处省略了其他列,只保留关键的状态列
  1. slot="status" 插槽
  • 定义表格中名为 “status” 的列
  • slot-scope="status":获取当前行的状态值(从数据源中传递来的 agreereject
  1. <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 的过滤器定义,用于格式化文本
  • 包含两个自定义过滤器:statusFilterstatusTypeFilter
  1. statusFilter 过滤器
  • 作用:将原始状态码转换为中文文本
  • 映射关系
  'agree''成功'  // 表示操作成功
  'reject''驳回'  // 表示操作被拒绝
  • 兜底处理|| '未知状态' 防止未定义状态导致错误
  1. statusTypeFilter 过滤器
  • 作用:将原始状态码转换为 Ant Design 徽标类型
  • 映射关系
  'agree''success'  // 显示绿色徽标
  'reject''error'    // 显示红色徽标
  • 兜底处理|| 'default' 确保未知状态有默认显示

完整工作流程

  1. 数据传递
    表格数据中的 status 字段(如 agreereject) → 通过 slot-scope="status" 传递给过滤器

  2. 过滤器处理

    • 通过 status | statusFilter 转换为中文文本
    • 通过 status | statusTypeFilter 转换为徽标类型
  3. 最终渲染

   <!-- 当 status = 'agree'-->
   <a-badge status="success" text="成功" />

   <!-- 当 status = 'reject'-->
   <a-badge status="error" text="驳回" />

注意事项

  1. 何时使用过滤器?
  • 简单文本转换(如状态码转文字)
  • 无副作用的数据格式化(如日期、货币)
  • 需要链式处理(如先转大写再截断)
  1. 何时不用过滤器?
  • 需要响应式更新(过滤器不会随依赖变化自动更新)
  • 复杂数据处理(应使用计算属性或方法)
  1. 避免滥用
  • 对于需要复用的复杂逻辑,建议封装为 工具函数mixin
  • 需要响应式更新时,优先使用 计算属性
  1. 全局过滤器管理
    推荐在单独文件中集中管理:
// 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()
})
http://www.dtcms.com/a/109146.html

相关文章:

  • Blender运行python脚本?
  • 42.评论日记
  • 2874. 有序三元组中的最大值 II
  • 全星 研发项目管理APQP 软件:驱动汽车及制造业研发升级的数字化引擎
  • 【笔记】如何使得docker desktop下载至D盘而不是C盘?
  • django REST framework(DRF)教程
  • 一文读懂数据仓库:从概念到技术落地
  • 蓝桥杯Java B组省赛真题题型近6年统计分类
  • 7-5 表格输出
  • 高速电路 PCB 设计要点一
  • 2010-2020年 省级、城市数字经济创新创业-分项指数得分与排名 -社科数据
  • vue3 中引入tinymce富文本
  • 让AI再次伟大-MCP-Server开发指南
  • LeetCode Hot100 刷题笔记(7)—— 贪心
  • WPS JS宏编程教程(从基础到进阶)-- 第三部分:JS宏编程语言开发基础
  • Linux线程概念与控制:【线程概念(页表)】【Linux线程控制】【线程ID及进程地址空间布局】【线程封装】
  • 32f4,串口1,usart.c.h2025
  • EIP-712:类型化结构化数据的哈希与签名
  • 【行测】判断推理:图形推理
  • System.arraycopy()
  • SD 重温学习笔记
  • 深入理解 Python 中的 `server.listen(backlog)`:监听队列的奥秘
  • 《深度探秘:SQL助力经典Apriori算法实现》
  • GO语言学习(17)Gorm的数据库操作
  • 两点与圆(异或神通)
  • 快速求平方根
  • 【每日一个知识点】分布式数据湖与实时计算
  • Ubuntu上离线安装ELK(Elasticsearch、Logstash、Kibana)
  • Vulkan实例教程1 - Vulkan应用程序结构(附代码)
  • node ---- 解决错误【Error: error:0308010C:digital envelope routines::unsupported】