vue 2过滤器是纯函数，用于文本格式化且不修改原始数据；分全局（vue.filter注册）和局部（组件filters选项定义）两种，仅在{{}}和v-bind中通过|调用，vue 3已移除。
Vue 2 的过滤器（Filters）是专为文本格式化和数据展示设计的纯函数，不修改原始数据，只返回处理后的新值。它用起来轻量、直观，适合日期、数字、状态码、大小写等简单转换场景。
怎么定义过滤器
过滤器分全局和局部两种，都必须是返回值的函数：
-
全局过滤器：在 main.js 或入口文件中注册，所有组件都能用
Vue.filter('currency', (value, symbol = '¥') => {<br> if (!value) return '';<br> return symbol + Number(value).toFixed(2);<br>}); -
局部过滤器：写在组件的 filters 选项里，仅当前组件生效
export default {<br> filters: {<br> capitalize(value) {<br> if (!value) return '';<br> return value.toString().charAt(0).toUpperCase() + value.toString().slice(1);<br> }<br> }<br>};
怎么在模板中使用
过滤器只能用在 {{ }} 插值表达式或 v-bind 指令中，通过管道符 | 调用：
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- 基础用法：
{{ price | currency }}→ ¥129.00 - 传参用法：
{{ date | formatDate('YYYY-MM-DD') }} - 链式调用：
{{ message | capitalize | truncate(10, '…') }}（先大写，再截断） - v-bind 中使用：
<div :title="desc | truncate(20)">内容</div>
常见实用过滤器示例
几个高频场景可直接复用：
-
日期格式化：
formatDate(value, fmt = 'YYYY-MM-DD')，内部用new Date()解析时间戳或字符串 -
数字千分位：
thousands(value) { return Number(value).toLocaleString(); } -
状态码转文字：
statusText(code) { const map = { 0: '待处理', 1: '已完成', 2: '已取消' }; return map[code] || '未知'; } -
文本截断：
truncate(text, len = 15, suffix = '…') { return text?.length > len ? text.slice(0, len) + suffix : text; }
注意事项和限制
用得顺手，也得避开几个坑：
- 过滤器函数第一个参数固定是管道符前的值，后续才是自定义参数
- 必须有 return，否则模板显示 undefined
- 不能在 v-if、v-for 或方法调用中使用
- 如果局部和全局同名，优先使用局部过滤器（就近原则）
- Vue 3 已完全移除过滤器，项目升级需改用 computed 或 methods
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
