vue过滤器实现

Vue 2 过滤器实现

Vue 2 提供了过滤器功能，用于格式化文本显示。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式。

定义全局过滤器

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

定义局部过滤器

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

使用过滤器

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

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

<!-- 链式调用 -->
{{ message | filterA | filterB }}

<!-- 接收参数 -->
{{ message | filterA('arg1', arg2) }}

Vue 3 替代方案

Vue 3 已移除过滤器功能，推荐使用方法或计算属性替代。

使用方法替代

methods: {
  capitalize(value) {
    if (!value) return ''
    return value.charAt(0).toUpperCase() + value.slice(1)
  }
}

模板中使用方法

{{ capitalize(message) }}

使用计算属性

computed: {
  formattedMessage() {
    return this.capitalize(this.message)
  }
}

自定义指令实现类似功能

对于复杂格式化需求，可以使用自定义指令。

Vue.directive('format', {
  bind(el, binding) {
    el.textContent = binding.value.toUpperCase()
  },
  update(el, binding) {
    el.textContent = binding.value.toUpperCase()
  }
})

<div v-format="message"></div>

国际化过滤器示例

实现多语言文本转换的过滤器示例：

Vue.filter('i18n', function(value) {
  const translations = {
    'hello': '你好',
    'world': '世界'
  }
  return translations[value] || value
})

{{ 'hello' | i18n }}

注意：Vue 3 项目建议使用专门的国际化库如 vue-i18n 替代过滤器实现。