小编给大家分享一下vue中内置过滤器怎么用，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

创新互联公司坚持“要么做到，要么别承诺”的工作理念，服务领域包括：网站制作、成都网站设计、企业官网、英文网站、手机端网站、网站推广等服务，满足客户于互联网时代的洛扎网站设计、移动媒体设计的需求，帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴！

前言

vue中过滤器filters的作用是什么？

过滤器是一个通过输入数据，能够及时对数据进行处理并返回一个数据结果的简单函数。Vue有很多很便利的过滤器，可以参考官方文档。

能够帮我们处理快速一些数据的格式----format数据格式化处理。

语法也很简单

{{ message | Filter }}

• message: 要格式化的数据

• Filter: 对数据格式化的方法

链式过滤

VueJs允许你链式调用过滤器，简单的来说，就是一个过滤器的输出成为下一个过滤器的输入，然后再次过滤。接下来，我们可以想象一个比较简答的例子，使用了Vue的 filterBy + orderBy 过滤器来过滤所有商品products。过滤出来的产品是属于电器类商品，并且按电器字母排序。

filterBy过滤器 : 过滤器的值必须是一个数组，filterBy + 过滤条件。过滤条件是：‘string || function' + in ‘optionKeyName'

orderBy过滤器 : 过滤器的值必须是一个数组，orderBy + 过滤条件。过滤条件是：‘string || array ||function' + ‘order ≥ 0 为升序 || order < 0 为降序'

接下来，我们可以看下第二个例子：我们有一个商品数组products，我们希望遍历这个数组，并把他们打印成一张清单，这个用v-for很容易实现。

 {{ product.name | capitalize }} - {{ product.price | currency }}

capitalize过滤器 : 将输入的字符串首字母转换成大写字母的过滤器。currency过滤器 : 将输入的数字转换成现金的过滤器。可以跟上货币符号（默认$）和保留的小数位（默认2）。

利用上面的两个过滤器，能够很好的把一个json数组的商品清单格式化成通熟易懂的商品价格清单。

如果只想要电器类商品，可以在v-for上加过滤条件：

 {{ product.name | capitalize }} - {{ product.price | currency }}

上面的例子，就是用filterBy 过滤在 'category'中含有'electronics' 关键字的列表，返回的列表就是只含有 'electronics' 关键字的列表。

如果想要多个搜索条件：

 {{ product.name | capitalize }} - {{ product.price | currency }}

上面的例子，就是用filterBy 过滤在 'category' 和 'name' 中含有'electronics' 关键字的列表。

最后我们还需要将这个列表用字母进行排序。我们可以在 filterBy 过滤器的基础上，链式调用orderBy 过滤器。

 
  {{ product.name | capitalize }} - {{ product.price | currency }}
 

orderBy 的排序方式默认是升序，如果想要降序，只需要加一个小于0的参数：

下面看看vue自带过滤器有哪些，并附带小示例。最后记得看看如果自定义过滤器哦！

vue自带的过滤器

capitalize(首字母大写)

 {{message | capitalize}}

// 初始message:abc

{{message | uppercase}}

// 上面代码输出:ABC

// 初始message:ABC

{{message | lowercase}}

// 上面代码输出:abc

 {{message | currency}} // 输出$520.13
 {{message | currency '¥' "2"}} //输出 $520.13