Vue中filters过滤器怎么使用

# Vue中filters过滤器怎么使用 ## 一、什么是Vue过滤器 Vue.js中的过滤器（Filters）是用于格式化文本的特殊函数，可以用在**双花括号插值**和**v-bind表达式**中。过滤器通过管道符（|）调用，主要作用是对原始数据进行二次处理并返回格式化后的结果。 ```javascript <!-- 基本语法 --> {{ message | filterName }} <!-- 链式调用 --> {{ message | filterA | filterB }} 

二、过滤器的注册方式

1. 全局注册

通过Vue.filter()方法注册全局过滤器，所有组件都可以使用：

Vue.filter('capitalize', function(value) { if (!value) return '' return value.toString().charAt(0).toUpperCase() + value.slice(1) }) 

2. 局部注册

在组件选项中通过filters属性注册：

export default { filters: { truncate(value, length = 10) { return value.length > length ? value.substring(0, length) + '...' : value } } } 

三、过滤器的基本使用

1. 在插值表达式中使用

<p>{{ user.name | capitalize }}</p> 

2. 在v-bind中使用

<div :title="rawTitle | truncate(5)"></div> 

3. 链式调用

{{ date | formatDate | parseTime }} 

四、过滤器参数传递

过滤器可以接收额外参数：

Vue.filter('currency', function(value, symbol = '¥') { return symbol + value.toFixed(2) }) 

使用方式：

<p>{{ price | currency('$') }}</p> 

五、常见使用场景

1. 文本格式化

// 手机号脱敏处理 filters: { hidePhone(val) { return val.replace(/^(\d{3})\d{4}(\d+)/, '$1****$2') } } 

2. 日期格式化

推荐使用第三方库如dayjs：

import dayjs from 'dayjs' filters: { formatDate(val, format = 'YYYY-MM-DD') { return dayjs(val).format(format) } } 

3. 数字处理

// 千分位分隔 filters: { thousandSeparator(val) { return val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') } } 

六、注意事项

1. this上下文：过滤器中无法访问组件实例（this为undefined）
2. 响应性：过滤器应是纯函数，不要修改原始数据
3. Vue 3变化：Vue 3已移除过滤器，推荐使用计算属性或方法替代
4. 性能：复杂逻辑建议使用计算属性

七、替代方案（Vue 3）

在Vue 3中可以通过以下方式替代过滤器：

// 使用computed computed: { formattedDate() { return dayjs(this.date).format('YYYY-MM-DD') } } // 使用方法 methods: { currency(value) { return '¥' + value.toFixed(2) } } 

八、总结

Vue过滤器提供了一种便捷的文本格式化方案，适合处理简单的数据转换。虽然Vue 3已移除该特性，但在Vue 2项目中仍广泛使用。开发者应根据项目需求选择合适的数据处理方式，对于复杂逻辑建议优先使用计算属性。

提示：在大型项目中，可将常用过滤器提取为独立模块，通过import引入保持代码整洁。 “`

（全文约900字）