Vue.js入门教程-过滤器

1、过滤器

1.1 概述

（1）过滤器（Filters）提供了一种 执行文本转换的方法，好比说都转换成大写字母或者几乎作任何咱们想作的事情。

（2）过滤器既能够在 双花括号插值 中使用，也能够在 v-bind 指令的 表达式 中使用。

1.2 注意

（1）Vue 中的过滤器 不能替代 methods、computed 或者 watch，由于过滤器 不改变真正的 data，而只是改变渲染的结果，并返回过滤后的版本。

（2）在不少不一样的状况下，过滤器都是有用的，好比尽量保持API响应的干净，并在前端处理数据的格式。在你但愿避免重复和链接的状况下，他们也能够有效地封装成可重用代码块背后的全部逻辑。

2、默认过滤器

若是你不是第一次接触 Vue，你应该知道 Vue 2.0 之前的版本是有内置的过滤器，可是他们从 Vue 2.0 版本中删除了。

内置的过滤器是有用的，但它们缺少纯JavaScript的灵活性。当一个内置函数不适合您的需求时，您最终会从新实现相似功能（在最终代码中，内置的代码就成无用代码，死代码），或者必须等待Vue更新它们并发布新版本。————Vue的做者

3、定义过滤器

Vue 有两种不一样的方式注册过滤器：①本地过滤器②全局过滤器。你能够跨全部组件访问全局过滤器，而本地过滤器只容许你在其定义的组件内部使用。

3.1 本地过滤器

你能够在一个组件的选项中定义本地的过滤器。

3.2 全局过滤器

在建立Vue 实例以前全局定义过滤器。

3.3 示例

下面这个例子用到了 capitalize 过滤器。

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

4、过滤器串连

4.1 说明

（1）过滤器可以使用管道（|）符号进行串连，并经过一系列过滤器转换一个值。

（2）在这个例子中，filterA 被定义为接收单个参数的过滤器函数，表达式 message 的值将做为参数传入到函数中。而后继续调用一样被定义为接收单个参数的过滤器函数 filterB，将 filterA 的结果传递到 filterB 中。

（3）过滤器是 JavaScript 函数，所以能够接收参数。

（4）这里，filterA 被定义为接收三个参数的过滤器函数。其中 message 的值做为第一个参数，普通字符串 'arg1' 做为第二个参数，表达式 arg2 的值做为第三个参数。

4.2 示例

（1）英文小写转换大写。

（2）价格只保留两位小数，而且加上美圆符号。

更多系列文章在GitHub地址

阅读更多