vue filter 实现

在 Vue.js 中，过滤器（Filter）是一种用于文本格式化的功能，可以在模板中直接使用。以下是实现过滤器的详细方法：

全局过滤器注册

通过 Vue.filter 方法注册全局过滤器，可在所有组件中使用：

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

模板中使用方式：

<p>{{ message | capitalize }}</p>

局部过滤器注册

在组件选项中定义 filters 属性，仅在该组件内可用：

new Vue({
  filters: {
    currency(value) {
      return '$' + value.toFixed(2)
    }
  }
})

模板调用：

<p>{{ price | currency }}</p>

链式调用

多个过滤器可以串联使用：

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

过滤器参数

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

Vue.filter('truncate', function(value, length) {
  return value.slice(0, length) + '...'
})

模板调用：

<p>{{ longText | truncate(10) }}</p>

注意事项

• Vue 3 已移除过滤器功能，推荐使用计算属性或方法替代
• 过滤器应设计为纯函数，避免产生副作用
• 复杂逻辑建议使用计算属性实现

对于 Vue 3 项目，替代方案如下：

// 使用计算属性
computed: {
  formattedText() {
    return this.text.toUpperCase()
  }
}
// 或使用方法
methods: {
  formatText(text) {
    return text.toUpperCase()
  }
}