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字）