在 Vue.js 中，过滤器（Filter） 是一种用于文本格式化的工具，通常用于模板中的数据处理。Vue 2.x 支持过滤器，但在 Vue 3.x 中已被移除，推荐使用计算属性（Computed Properties）、方法调用（Methods） 或自定义组合函数替代。

一、Vue 2 中的过滤器使用

1、定义过滤器
局部过滤器：在组件内定义
全局过滤器：通过 `Vue.filter()` 注册

javascript
// 全局过滤器
Vue.filter('capitalize', function(value) {
if (!value) return ''
return value.charAt(0).toUpperCase() + value.slice(1)
})

// 局部过滤器
export default {
filters: {
reverse(value) {
return value.split('').reverse().join('')
}
}
}

2、在模板中使用
使用 `|` 管道符号调用过滤器

vue
<template>
<div>
{{ message | capitalize }} <!-输出：Hello -->
{{ message | reverse }} <!-输出：olleh -->
</div>
</template>

3、传递参数
过滤器可以接受额外参数，用括号包裹

javascript
Vue.filter('format', function(value, prefix, suffix) {
return `${prefix}${value}${suffix}`
})

vue
{{ price | format('￥', '元') }} <!-输出：￥100元 -->

4、多个过滤器串联
多个过滤器可以串联使用，前一个过滤器的输出作为下一个的输入

vue
{{ 'hello' | capitalize | reverse }} <!-输出：OLLEH -->

二、Vue 3 中的替代方案

Vue 3 已移除过滤器，但可以通过以下方式实现相同功能：

1、使用方法调用
vue
<template>
<div>{{ formatPrice(price) }}</div>
</template>

<script>
export default {
methods: {
formatPrice(value) {
return `￥${value}元`
}
}
}
</script>

2、使用计算属性
vue
<template>
<div>{{ formattedPrice }}</div>
</template>

<script>
export default {
data() {
return {
price: 100
}
},
computed: {
formattedPrice() {
return `￥${this.price}元`
}
}
}
</script>

3、使用自定义组合函数（Vue 3 Composition API）
vue
<template>
<div>{{ formattedPrice }}</div>
</template>

<script>
import { ref, computed } from 'vue'

function useFormatPrice(price) {
return computed(() => `￥${price.value}元`)
}

export default {
setup() {
const price = ref(100)
const formattedPrice = useFormatPrice(price)
return { formattedPrice }
}
}
</script>

三、注意事项与最佳实践

1、过滤器仅用于文本处理：不要在过滤器中执行复杂逻辑或修改原始数据。
2、Vue 3 中已弃用过滤器：建议统一使用方法调用或计算属性。
3、避免过度使用过滤器：对于频繁更新的数据，使用计算属性更高效。
4、命名规范：过滤器名称应语义清晰，如 `formatDate`、`currency` 等。
5、参数顺序：第一个参数是表达式的值，后续参数按顺序传递。

四、总结

| Vue 版本 | 支持过滤器 | 推荐替代方案 |
|-|||
| Vue 2.x | ✅ 支持 | 局部/全局过滤器 |
| Vue 3.x | ❌ 已移除 | 计算属性、方法调用、组合函数 |

如果你正在使用 Vue 2，可以继续使用过滤器；若使用 Vue 3，则建议使用更灵活的替代方案。