vue filter 实现

Vue 过滤器（Filter）实现方法

Vue 过滤器用于格式化文本，常用于日期、货币等场景。Vue 2.x 原生支持过滤器，Vue 3.x 已移除，但可通过全局属性或组合式 API 模拟类似功能。

Vue 2.x 过滤器实现

全局过滤器注册 在 main.js 或入口文件中定义全局过滤器：

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

局部过滤器注册 在组件选项中定义：

filters: {
  currency(value, symbol = '$') {
    return symbol + value.toFixed(2)
  }
}

模板中使用

<p>{{ message | capitalize }}</p>
<p>{{ price | currency('¥') }}</p>

Vue 3.x 替代方案

全局属性模拟 在 main.js 中：

app.config.globalProperties.$filters = {
  dateFormat(value) {
    return new Date(value).toLocaleDateString()
  }
}

组合式 API 实现 创建可复用函数：

// utils/filters.js
export const useFilters = () => {
  const truncate = (text, length = 30) => {
    return text.length > length 
      ? text.substring(0, length) + '...' 
      : text
  }
  return { truncate }
}

组件中使用

<script setup>
import { useFilters } from './utils/filters'
const { truncate } = useFilters()
</script>

<template>
  <p>{{ truncate(longText) }}</p>
</template>

过滤器链式调用

Vue 2.x 支持多个过滤器串联：

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

注意事项

• Vue 3 移除过滤器主要因为其功能与计算属性/方法重叠
• 复杂逻辑建议使用计算属性替代
• 过滤器应保持纯函数特性，避免副作用