vue中过滤器filter的使用

        过滤器(Filters)是 Vue 中用于文本格式化的一种特殊功能，可以在模板中对数据进行简单的转换处理。

基本概念

过滤器主要用于：

• 格式化文本显示

• 数据转换

• 简单计算后显示

定义过滤器

1. 局部过滤器 (组件内)

export default {
  filters: {
    capitalize: function(value) {
      if (!value) return ''
      value = value.toString()
      return value.charAt(0).toUpperCase() + value.slice(1)
    }
  }
}

2. 全局过滤器

// 在main.js或单独的文件中定义
Vue.filter('currency', function(value) {
  return '$' + value.toFixed(2)
})

使用过滤器

1. 在模板中使用

<!-- 在双花括号中 -->
<p>{{ message | capitalize }}</p>

<!-- 在v-bind表达式中 -->
<div v-bind:id="rawId | formatId"></div>

2. 链式调用

<p>{{ message | filterA | filterB }}</p>

3. 接收参数

<p>{{ date | formatDate('YYYY-MM-DD') }}</p>

 对应的过滤器定义：

Vue.filter('formatDate', function(value, format) {
  // 使用第三方库如moment.js格式化日期
  return moment(value).format(format || 'YYYY/MM/DD')
})

常见使用场景

1. 文本格式化

Vue.filter('truncate', function(value, length) {
  if (!value) return ''
  value = value.toString()
  return value.length > length ? value.substring(0, length) + '...' : value
})

2. 数字处理

Vue.filter('percentage', function(value, decimals = 0) {
  return `${(value * 100).toFixed(decimals)}%`
})

3. 状态显示

Vue.filter('statusText', function(value) {
  const statusMap = {
    0: '未开始',
    1: '进行中',
    2: '已完成'
  }
  return statusMap[value] || '未知状态'
})

Vue 2 和 Vue 3 的区别

Vue 2 中的过滤器

• 支持全局和局部过滤器

• 可以在插值和 v-bind 中使用

• 是官方支持的功能

Vue 3 中的变化

• 移除了过滤器（Filters 不再作为官方功能）

• 推荐使用方法或计算属性替代

• 迁移方案：

  // 以前使用过滤器
  <p>{{ amount | currency }}</p>
  
  // Vue 3 替代方案1 - 使用方法
  <p>{{ currency(amount) }}</p>
  
  // Vue 3 替代方案2 - 使用计算属性
  computed: {
    formattedAmount() {
      return '$' + this.amount.toFixed(2)
    }
  }

最佳实践

1. 简单转换：过滤器最适合简单的文本转换

2. 复杂逻辑：对于复杂数据处理，建议使用计算属性或方法

3. 性能考虑：过滤器在每次重新渲染时都会执行，对于复杂操作可能影响性能

4. 可复用性：将常用过滤器定义为全局过滤器

5. 命名规范：使用小驼峰或kebab-case命名

总结

虽然 Vue 3 移除了过滤器，但在 Vue 2 中它仍然是一个有用的特性，可以保持模板简洁。迁移到 Vue 3 时，可以轻松地用方法或计算属性替换过滤器功能。