vue中filter函数

### Vue.js 中 Filter 函数的用法

在 Vue.js 中，`filters` 是一种用于文本格式化的便捷方式。这些过滤器可以被用作模板中的指令属性绑定表达式、双大括号插值语法的一部分或是 `v-bind` 表达式的组成部分。

#### 基本用法

通过简单的例子来展示如何创建并应用一个基本的过滤器：

<div id="app">
  {{ message | capitalize }}
</div>
<script>
new Vue({
  el: '#app',
  data: {
    message: 'hello world'
  },
  filters: {
    capitalize(value) {
      if (!value) return ''
      value = value.toString()
      return value.charAt(0).toUpperCase() + value.slice(1)
    }
  }
})
</script>

此代码片段展示了如何定义名为 `capitalize` 的全局过滤器，并将其应用于字符串变量 `message` 上，在页面上显示首字母大写的 "Hello world"[^1]。

#### 参数传递给 Filters

除了处理单一输入外，还可以向过滤器传入额外参数以增强灵活性:

<span>{{ message | formatMessage('prefix-', '-suffix') }}</span>

// JavaScript部分
filters: {
  formatMessage(text, prefix, suffix){
    return `${prefix}${text}${suffix}`;
  }
}

这段代码会输出带有前后缀修饰的消息内容[^2]。

#### 链接多个 Filters

可以在同一个地方链接多于一个过滤器；它们按照指定顺序依次执行：

{{ text | filterA | filterB(argForFilterB)}}

每个后续过滤器接收前一过滤器的结果作为其第一个参数[^3]。

#### 注册局部 vs 全局 Filters

- **局部注册**: 可以像上面那样直接放在组件选项对象内的 `filters` 字段下。
- **全局注册**: 使用 `Vue.filter()` 方法可使该过滤器在整个应用程序范围内可用。

需要注意的是从 Vue 3 开始官方已经移除对内置过滤器的支持，推荐使用计算属性或方法替代之[^4]。