18

1. 前言

本小节我们将学习如何使用过滤器。包括如何注册过滤器、过滤器的使用、过滤器的串联、过滤器的传参。过滤器的使用非常简单，同学们只需要多写几个例子就可以完全掌握。

Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。 — 官方定义

过滤器是对即将显示的数据做进一步的筛选处理，然后进行显示，值得注意的是过滤器并没有改变原来的数据，只是在原数据的基础上产生新的数据。过滤器在日常开发中也会大量使用，例如：枚举值的转换、首字母大写等等。

Vue 过滤器有全局注册和局部注册两种方式。全局注册的过滤器可以在项目中的所有组件中使用，局部注册的过滤器只能在当前组件内部使用。

过滤器可以用在两个地方：双花括号插值和 v-bind 表达式。过滤器应该被添加在 JavaScript 表达式的尾部，由 “管道” 符号表示：

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

<!-- 在 `v-bind` 中 -->
<div v-bind:id="message | filteName"></div>

接下来我们介绍全局过滤器和局部过滤器的注册方式。

通过 Vue.filter (name, function (){} ) 方式注册全局过滤器，第一个参数 name 为自定义过滤器名称；第二个参数是过滤函数，返回处理后的值。

一个首字母大写的过滤器：