VueJs 自定义过滤器使用总结
在这个教程中,我们将会通过几个例子,了解和学习VueJs的过滤器。我们参考了一些比较完善的过滤器,比如orderBy 和 filterBy。而且我们可以链式调用过滤器,一个接一个过滤。因此,我们可以定义我们自己的过滤器在我们的Vue实例中。
阅读这个教程的前提是你对Vue已经有了基本的语法基础。
VueJs中的过滤器基础
过滤器是一个通过输入数据,能够及时对数据进行处理并返回一个数据结果的简单函数。Vue有很多很便利的过滤器,可以参考官方文档, http://cn.vuejs.org/api/#过滤器 ,过滤器通常会使用管道标志 “ | ”, 比如:
{{ msg | uppercase }}// 'abc' => 'ABC'
在上述的例子中,在插值的时候,使用了Vue的一个uppercase过滤器,msg可以是直接写死,写成{{ ‘abc’ | uppercase }},也可以利用用户输入来改变msg的值。
uppercase过滤器 : 将输入的字符串转换成大写字母的过滤器。
链式过滤
VueJs允许你链式调用过滤器,简单的来说,就是一个过滤器的输出成为下一个过滤器的输入,然后再次过滤。接下来,我们可以想象一个比较简答的例子,使用了Vue的 filterBy + orderBy 过滤器来过滤所有商品products。过滤出来的产品是属于电器类商品,并且按电器字母排序。
filterBy过滤器 : 过滤器的值必须是一个数组,filterBy + 过滤条件。过滤条件是:‘string || function’ + in ‘optionKeyName’
orderBy过滤器 : 过滤器的值必须是一个数组,orderBy + 过滤条件。过滤条件是:‘string || array ||function’ + ‘order ≥ 0 为升序 || order < 0 为降序’
接下来,我们可以看下第二个例子:我们有一个商品数组products,我们希望遍历这个数组,并把他们打印成一张清单,这个用v-for很容易实现。
<li v-for="product in products">{{ product.name | capitalize }} - {{ product.price | currency }}
</li>
capitalize过滤器 : 将输入的字符串首字母转换成大写字母的过滤器。currency过滤器 : 将输入的数字转换成现金的过滤器。可以跟上货币符号(默认$)和保留的小数位(默认2)。
利用上面的两个过滤器,能够很好的把一个json数组的商品清单格式化成通熟易懂的商品价格清单。
如果只想要电器类商品,可以在v-for上加过滤条件:
<li v-for="product in products | filterBy 'electronics' in 'category' ">{{ product.name | capitalize }} - {{ product.price | currency }}
</li>
上面的例子,就是用filterBy 过滤在 'category'中含有'electronics' 关键字的列表,返回的列表就是只含有 'electronics' 关键字的列表。
如果想要多个搜索条件:
<li v-for="product in products | filterBy 'electronics' in 'category' 'name' ">{{ product.name | capitalize }} - {{ product.price | currency }}
</li>
上面的例子,就是用filterBy 过滤在 'category' 和 'name' 中含有'electronics' 关键字的列表。
最后我们还需要将这个列表用字母进行排序。我们可以在 filterBy 过滤器的基础上,链式调用orderBy 过滤器。
<ul><li v-for="product in products| filterBy 'electronics' in 'category'| orderBy 'name' ">{{ product.name | capitalize }} - {{ product.price | currency }}</li>
</ul>
orderBy 的排序方式默认是升序,如果想要降序,只需要加一个小于0的参数:
<li v-for="product in products| filterBy 'electronics' in 'category'| orderBy 'name' -1 "
>
自定义过滤器
虽然VueJs给我们提供了很多强有力的过滤器,但有时候还是不够。值得庆幸的,Vue给我们提供了一个干净简洁的方式来定义我们自己的过滤器,之后我们就可以利用管道 “ | ” 来完成过滤。
定义一个全局的自定义过滤器,需要使用Vue.filter()构造器。这个构造器需要两个参数。
Vue.filter() Constructor Parameters:
1.filterId: 过滤器ID,用来做为你的过滤器的唯一标识;
2.filter function: 过滤器函数,用一个function来接收一个参数,之后再将接收到的参数格式化为想要的数据结果。
回到之前的例子:现在设想我们有一个网上商城,并给我们的所有商品打五折。
为了完成这个例子,我们需要完成的是
使用Vue.filter()构造器创建一个过滤器叫做discount
输入商品的原价,能够返回其打五折之后的折扣价
Vue.filter( 'discount' , function(value) {return value * .5 ;});new Vue({el : 'body',data : {products : [{name: 'microphone', price: 25, category: 'electronics'},{name: 'laptop case', price: 15, category: 'accessories'},{name: 'screen cleaner', price: 17, category: 'accessories'},{name: 'laptop charger', price: 70, category: 'electronics'},{name: 'mouse', price: 40, category: 'electronics'},{name: 'earphones', price: 20, category: 'electronics'},{name: 'monitor', price: 120, category: 'electronics'}]}});
现在就可以像使用Vue自带的过滤器一样使用自定义过滤器了
<ul><li v-for="product in products">{{ product.name | capitalize }} - {{ product.price | discount | currency }}</li>
</ul>
上面的html代码将会输出打了五折之后的所有商品的清单列表。
那如果我们想要的是任意折扣呢?我们应该在discount过滤器里增加一个折扣数值参数,改造一下我们的过滤器。
Vue.filter( 'discount' , function(value,discount) {return value * ( discount / 100 ) ;});
然后重新调用我们的过滤器
<ul><li v-for="product in products">{{ product.name | capitalize }} - {{ product.price | discount 25 | currency }}</li>
</ul>
我们也可以在我们Vue实例里构造我们的过滤器,这样构造的好处是,这样就不会影响到其他不需要用到这个过滤器的Vue实例。
new Vue({el : 'body',data : {products : [{name: 'microphone', price: 25, category: 'electronics'},{name: 'laptop case', price: 15, category: 'accessories'},{name: 'screen cleaner', price: 17, category: 'accessories'},{name: 'laptop charger', price: 70, category: 'electronics'},{name: 'mouse', price: 40, category: 'electronics'},{name: 'earphones', price: 20, category: 'electronics'},{name: 'monitor', price: 120, category: 'electronics'}]},filters: {discount : function(value, discount){return value * ( discount / 100 );}}});
定义在全局就能在所有的实例中调用过滤器,如果定义在了实例里就在实例里调用过滤器。
结束语
多亏了简洁的管道过滤器构造器,我们不仅可以调用它原生的过滤器,也可以自定义属于我们自己的过滤器。但是Vue2.0好像把它去掉了。不过我想,如果是用1.0的朋友还是很需要用到过滤器的 : )
VueJs 自定义过滤器使用总结相关推荐
- 【AngularJS】—— 9 自定义过滤器
AngularJS另一个特点就是提供了过滤器,可以通过操作UNIX下管道的方式,操作数据结果. 通过使用管道,可以便于双向的数据绑定中视图的展现. 过滤器在处理过程中,将数据变成新的格式,而且可以使用 ...
- springboot过滤字段_SpringBoot自定义过滤器的两种方式及过滤器执行顺序
第一种 @WebFilter + @ServletComponentScan 注解 1.首先自定义过滤器 如下自定义过滤器 ReqResFilter必须实现 javax.servlet.Filter ...
- Django 框架13: 自定义过滤器和标签
2019独角兽企业重金招聘Python工程师标准>>> Django的模板系统自带了一系列的内建标签和过滤器,一般情况下可以满足开发要求,如果觉得需更精准的模板标签或者过滤器,可以自 ...
- 2.选择元素 - 自定义过滤器《jquery实战》
2.5.6 自定义过滤器 jQuery 中有两种方法创建自定义的过滤器.第一种比较简单,但是不鼓励,从 jQuery 1.8 开始已经被第二种方法取代.记住,使用新方法时,你自定义的过滤器在 jQue ...
- dubbo 自定义过滤器,打印接口调用信息
dubbo提供了web filter类似的com.alibaba.dubbo.rpc.Filter,这样,我们可以在dubbo提供的服务提供方和消费方都可以自定义过滤 器,从而可以获得方法调用的时间或 ...
- Flask 自定义过滤器多个参数传入
非完整HTML文件: <div class="container" style="margin-top:50px;"><div class=& ...
- Vuejs自定义全局组件--loading
不管是使用框架,还是不使用任何的框架,我们都不可避免的需要与"加载中--"打交道,刚刚学习了Vuejs自定义组件的写法,就现学现卖,介绍一下吧! 先看一下目录结构,一般情况下,每一 ...
- 过滤器获取service方法返回慢_Gateway:自定义过滤器
自定义局部过滤器 需求:在application.yml中对某个路由配置过滤器,该过滤器可以在控制台输出配置文件中指定名称的请求参数的值. 在gateway-server模块中编写过滤器工厂类MyPa ...
- flask第二十四篇——模板【6】自定义过滤器
请关注孟船长的公众号:自动化测试实战 大家想了解其他过滤器可以参考这里: http://jinja.pocoo.org/docs/dev/templates/#builtin-filters ---- ...
- django自定义过滤器及模板标签
django自定义过滤器及模板标签 文件路径配置: 某个app特有的 -app 目录下,新建templatetags 文件夹 -再到 templatetags 文件夹下创建python模块(py文件) ...
最新文章
- Spring security防止跨站请求伪造(CSRF防护)
- java如何重写_java中如何重写一个方法
- Notepad++中执行Python脚本
- 005_FastDFS分布式nginx访问
- ir指令、立即数的作用_立即数的判断方法一
- BZOJ1555 KD之死
- NHibernate学习笔记(二):one-to-one关系映射
- 在CentOS6虚拟机上安装VirtualBox增强功能
- POJ 3253-Fence Repair(堆)
- Linux工作笔记025---CentOS7.3安装Nginx
- 数据库链、物化视图、高级复制方面
- 跨域请求的常用方式及解释
- 服务器主板阵列创建!创建磁盘阵列RAID0、RAID1图文方法
- 售前更需要关注客户业务
- Mac 安装 home Brew以及 XCTool的过程记录
- 用Java实现邮件的发送
- 《图像语义分析》学习笔记 (一)
- Fresco · 基本使用及Gif和webP播放及循环播放详解
- react-native 关闭黄色警告
- 麦克表单可以做二维码吗_令令开门二维码门禁设备、手机均断网,可以开门吗?...
热门文章
- 12306服务器无响应,12306网络无法连接502是什么意思
- 使用firefox color自定义firefox的主题
- 双向迁移图协同过滤GCF的跨域推荐
- 如何卸载冰点还原精灵
- python狗狗年龄换算程序_1分钟检测狗狗是否老了,还有狗年龄换算表,快看你家狗的情况...
- SAP案例教程SD销售后台配置
- Sniffer软件简介
- 明尼苏达计算机科学硕士录取案例,专业42-明尼苏达大学双城分校研究生录取-W同学...
- 幼儿园故事导入语案例_幼儿园大班语言故事
- 如何导出带有dn值的栅格影像(方便arcgis处理)