1. 前言

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

2. 慕课解释

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

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

3. 定义过滤器

Vue 过滤器有全局注册和局部注册两种方式。全局注册的过滤器可以在项目中的所有组件中使用,局部注册的过滤器只能在当前组件内部使用。
过滤器可以用在两个地方:双花括号插值和 v-bind 表达式。过滤器应该被添加在 JavaScript 表达式的尾部,由“管道”符号指示:

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

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

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

3.1. 定义全局过滤器

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

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

实例演示
预览 复制