当前位置：首页 > VUE

vue filter 实现

2026-03-07 10:53:08VUE

在 Vue.js 中，过滤器（Filter）是一种用于文本格式化的功能，可以在模板中通过管道符 | 调用。尽管 Vue 3 已移除内置过滤器支持，但在 Vue 2 中仍可自定义过滤器。以下是实现方法：

全局过滤器

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

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

模板中使用：

vue filter 实现

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

局部过滤器

在组件选项中定义 filters 属性：

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

模板中使用：

vue filter 实现

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

链式调用

多个过滤器可串联使用：

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

注意事项

过滤器默认第一个参数为管道前的值，后续参数为调用时传入的参数
过滤器应设计为纯函数，避免副作用
复杂逻辑建议使用计算属性替代

Vue 3 推荐使用组合式 API 的 computed 或方法调用替代过滤器功能。例如：

import { computed } from 'vue'

export default {
  setup() {
    const formattedText = computed(() => {
      return text.value.toUpperCase()
    })
    return { formattedText }
  }
}