一、概述

过滤器实质不改变原始数据，只是对数据进行加工处理后返回过滤后的数据再进行调用处理，我们也可以理解其为一个纯函数。

在 vue3.x，过滤器已被移除。

二、@2.x

Vue 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示：

<!-- 在双花括号中 -->
{{ money | addSymbols }}

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

你可以在一个组件的选项中定义本地的过滤器：

filters: {
  addSymbols(value) {
    return "原价：¥ " + value;
  }
}

或者在创建 Vue 实例之前全局定义过滤器：

Vue.filter('addSymbols', (value) => {
  return "原价：¥ " + value;
})

new Vue({})

过滤器函数总接收表达式的值 (之前的操作链的结果) 作为第一个参数。在上述例子中，addSymbols 过滤器函数将会收到 money 的值作为第一个参数。

在 3.x 中，过滤器已删除，不再支持。相反地，官方建议用方法调用或计算属性替换它们。

如果在应用中全局注册了过滤器，那么在每个组件中用计算属性或方法调用来替换它可能就没那么方便了。

相反地，你可以通过全局属性在所有组件中使用它。

// src/main.ts
app.config.globalProperties.$filters = {
  addSymbols: (value) => `¥${value.toFixed(2)}`,
};

然后，你可以通过 $filters 对象修改所有的模板，像下面这样：

<div>{{$filters.addSymbols(30)}}</div>