vue 内置过滤器的使用总结(附加自定义过滤器)

2023-09-03 13:30:04 165

前言

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}}

varmyVue=newVue({ el:".test", data:{ message:"javan" } })

上面代码输出:Javan

uppercase(全部大写)

//初始message:abc

{{message|uppercase}}

//上面代码输出:ABC

lowercase(全部小写)

//初始message:ABC

{{message|lowercase}}

//上面代码输出:abc

currency(输出金钱以及小数点)


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

varmyVue=newVue({ el:".test", data:{ message:"520.1314" } })

第一个参数{String}[货币符号]-默认值:'$'
第二个参数{Number}[小数位]-默认值:2

pluralize(变复数)

如果只有一个参数，复数形式只是简单地在末尾添加一个“s”。如果有多个参数，参数被当作一个字符串数组，对应一个、两个、三个…复数词。如果值的个数多于参数的个数，多出的使用最后一个参数。


{{message}}{{message|pluralize'item'}}输出:1item


{{item}}{{item|pluralize'item'}}
输出:1item2items3items





{{item}}{{item|pluralize'st''rd'}}
输出:1st2rd3rd





{{item}}{{item|pluralize'item'}}
输出:1item2items3items





{{item}}{{item|pluralize'st''rd'}}
输出:1st2rd3rd

输出oioaloouooala

输出lilylucy

输出lily+undefinedlucy+undefinedundefined+lsh varmyVue=newVue({ el:".test", data:{ lili:["oi","oa","ll","lo","ouo","kk","oala"], man:[//此处注意man是数组,不是对象 {name:"lily"}, {name:"lucy"}, {name:"oo"}, {dada:"lsh"}, {dada:"ofg"} ] } })

遍历数组

输出kklloi

输出oillkk 遍历含对象的数组

输出BruceChuckJackie

输出JackieChuckBruce 使用函数排序

输出BruceChuckJackie varmyVue=newVue({ el:".test", data:{ lili:["oi","kk","ll"], man:[//此处注意man是数组,不是对象 { name:'Jackie', age:62 }, { name:'Chuck', age:76 }, { name:'Bruce', age:61 } ] }, methods:{ ageByTen:function(){ return1; } } })

vue 内置过滤器的使用总结(附加自定义过滤器)

热门推荐

随机推荐