JavaScript过滤器是模板中用于数据格式化而不改变原始数据的小函数，常见于Vue 2（支持内置/自定义，用|调用），Vue 3已移除，改用计算属性、方法或组合式API替代。
JavaScript过滤器是模板中用来对数据进行格式化处理的小函数，它不改变原始数据，只影响显示效果。常见于 Vue.js 等支持模板语法的框架中（Vue 2 支持内置和自定义过滤器，Vue 3 已移除，需用计算属性或方法替代）。
过滤器的基本写法（以 Vue 2 为例）
在模板中用管道符 | 调用，接在表达式后面：
<span>{{ message | capitalize }}</span>
上面会把 message 的首字母转大写再显示。
立即学习“Java免费学习笔记（深入）”；
定义方式有两种：
-
全局过滤器：用
Vue.filter('filterName', function(value) { ... }) -
局部过滤器：在组件选项中加
filters: { filterName(value) { ... } }
常用内置过滤器（Vue 2）
Vue 2 提供了几个简单实用的内置过滤器（注意：仅限 Vue 2，且不支持链式调用复杂逻辑）：
-
capitalize：首字母大写（如
"hello" → "Hello"） - uppercase：全部转大写
- lowercase：全部转小写
-
currency：添加货币符号（需传参，如
{{ price | currency('$') }}） -
pluralize：根据数字自动切换单复数（如
{{ count | pluralize('item') }}）
自定义过滤器处理常见格式化需求
比如日期、数字千分位、手机号掩码等，都可封装为过滤器：
-
日期格式化：
date | formatDate('YYYY-MM-DD')→ 返回格式化后字符串 -
手机号脱敏：
phone | maskPhone→ 显示为138****1234 -
金额保留两位小数：
amount | toFixed(2)→ 自动补零，12 → "12.00"
关键点：过滤器函数第一个参数固定是表达式的值，后续参数来自模板中传入（如 | filterA('a', 'b')，则函数接收 value, arg1, arg2）。
Vue 3 中如何替代过滤器？
Vue 3 不再支持过滤器语法，推荐以下更清晰可控的方式：
-
用计算属性：适合依赖响应式数据的格式化，如
formattedTime: computed(() => formatISO(new Date())) -
用普通方法：在 methods 中定义格式化函数，模板中调用
{{ formatDate(post.time) }} -
用组合式 API + 工具函数：在
setup()中引入并使用useDateFormat()等可复用逻辑
本质上，过滤器只是语法糖；现代写法更强调逻辑可追踪、易测试、易复用。
基本上就这些。过滤器本质是视图层的数据“化妆师”，用得好能让模板干净简洁；但别让它承担业务逻辑，也别在 Vue 3 里找它——换种方式，一样利索。
