Vue.js学习之过滤器详解


Posted in Javascript onJanuary 22, 2017

前言

在这个教程中,我们将会通过几个例子,了解和学习VueJs的过滤器。阅读这这篇文中的前提是你对Vue已经有了基本的语法基础。

Vue.Js中的过滤器基础

过滤器是一个通过输入数据,能够及时对数据进行处理并返回一个数据结果的简单函数。Vue有很多很便利的过滤器,可以参考官方文档, http://cn.vuejs.org/api/#过滤器 ,过滤器通常会使用管道标志 “ | ”, 比如:

{{ msg | capitalize }}
// 'abc' => 'ABC'

uppercase过滤器 : 将输入的字符串转换成大写字母的过滤器。

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

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

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

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

<ul class="product">
 <li v-for="product in products|filterBy '水果' in 'category' |orderBy 'price' 1">
 {{product.name}}-{{product.price | currency}}
 </li>
</ul>

上面的例子,就是用filterBy 过滤在 'category'中含有'水果' 关键字的列表,返回的列表就是只含有 '水果' 关键字的列表,而orderBy过滤器是根据价格做了一个升序,如果想要降序,只需要加一个小于0的参数;

自定义过滤器

虽然VueJs给我们提供了很多强有力的过滤器,但有时候还是不够。值得庆幸的,Vue给我们提供了一个干净简洁的方式来定义我们自己的过滤器,之后我们就可以利用管道 “ | ” 来完成过滤。

定义一个全局的自定义过滤器,需要使用Vue.filter()构造器。这个构造器需要两个参数。

Vue.filter() Constructor Parameters:

      1.filterId: 过滤器ID,用来做为你的过滤器的唯一标识;

      2.filter function: 过滤器函数,用一个function来接收一个参数,之后再将接收到的参数格式化为想要的数据结果。

上面的例子中,我们要实现商品价格打5折该怎么做呢?其实就是实现的一个自定义的过滤器,表示将商品的价格打了5折;而要实现它,需要完成的是:

      a、使用Vue.filter()构造器创建一个过滤器叫做discount

      b、输入商品的原价,能够返回其打五折之后的折扣价

代码见下面:

Vue.filter('discount', function(value) {
 return value * .5;
});
var product = new Vue({
 el: '.product',
 data: {
 products: [
  {name: '苹果',price: 25,category: "水果"}, 
  {name: '香蕉',price: 15,category: "水果"}, 
  {name: '雪梨',price: 65,category: "水果"}, 
  {name: '宝马',price: 2500,category: "汽车"},
  {name: '奔驰',price: 10025,category: "汽车"}, 
  {name: '柑橘',price: 15,category: "水果"}, 
  {name: '奥迪',price: 25,category: "汽车"}
 ]
 },
})

现在就可以像使用Vue自带的过滤器一样使用自定义过滤器了

<ul class="product">
 <li v-for="product in products|filterBy '水果' in 'category' |orderBy 'price' 0">
 {{product.name}}-{{product.price|discount | currency}}
 </li>
</ul>

上面代码实现的商品打5折,而如果要实现价格打任意折扣呢?应该在discount过滤器里增加一个折扣数值参数,改造一下我们的过滤器。

Vue.filter('discount', function(value, discount) {
 return value * (discount / 100);
});

然后重新调用我们的过滤器

<ul class="product">
 <li v-for="product in products|filterBy '水果' in 'category' |orderBy 'price' 0">
 {{product.name}}-{{product.price|discount 25 | currency}}
 </li>
</ul>

我们也可以在我们Vue实例里构造我们的过滤器,这样构造的好处是,这样就不会影响到其他不需要用到这个过滤器的Vue实例。

/*定义在全局 
Vue.filter('discount', function(value,discount) {
 return value * ( discount / 100 ) ;
});
*/
var product = new Vue({
 el: '.product',
 data: {
 products: [
  {name: '苹果',price: 25,category: "水果"}, 
  {name: '香蕉',price: 15,category: "水果"}, 
  {name: '雪梨',price: 65,category: "水果"}, 
  {name: '宝马',price: 2500,category: "汽车"},
  {name: '奔驰',price: 10025,category: "汽车"}, 
  {name: '柑橘',price: 15,category: "水果"}, 
  {name: '奥迪',price: 25,category: "汽车"}
 ]
 },
 //自定义在实例
 filters: {
 discount: function(value, discount) {
  return value * (discount / 100);
 }
 }
})

定义在全局就能在所有的实例中调用过滤器,如果定义在了实例里就在实例里调用过滤器。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家学习或者使用vue能带来一定的帮助,如果有疑问大家可以留言交流。

Javascript 相关文章推荐
js控制框架刷新
Aug 01 Javascript
通过JQuery实现win8一样酷炫的动态磁贴效果(示例代码)
Jul 13 Javascript
jquery弹出框的用法示例(2)
Aug 26 Javascript
JavaScript 监控微信浏览器且自带返回按钮时间
Nov 27 Javascript
详解AngularJS验证、过滤器、指令
Jan 04 Javascript
javascript基础知识讲解
Jan 11 Javascript
Vue.Draggable实现拖拽效果
Jul 29 Javascript
微信小程序自定义多选事件的实现代码
May 17 Javascript
Vue实现页面添加水印功能
Nov 09 Javascript
vue 组件简介
Jul 31 Javascript
关于JavaScript数组去重的一些理解汇总
Sep 10 Javascript
js实现特别简单的钟表效果
Sep 14 Javascript
Jquery与Bootstrap实现后台管理页面增删改查功能示例
Jan 22 #Javascript
Ionic 2 实现列表滑动删除按钮的方法
Jan 22 #Javascript
Vue.js学习之计算属性
Jan 22 #Javascript
ionic中列表项增加和删除的实现方法
Jan 22 #Javascript
JQueryEasyUI框架下的combobox的取值和绑定的方法
Jan 22 #Javascript
jQuery学习之DOM节点的插入方法总结
Jan 22 #Javascript
select下拉框插件jquery.editable-select详解
Jan 22 #Javascript
You might like
从一个不错的留言本弄的mysql数据库操作类
2007/09/02 PHP
rrmdir php中递归删除目录及目录下的文件
2011/05/15 PHP
深入eAccelerator与memcached的区别详解
2013/06/06 PHP
php中require和require_once的区别说明
2014/02/27 PHP
php将日期格式转换成xx天前的格式
2015/04/16 PHP
PHP字符串与数组处理函数用法小结
2020/01/07 PHP
JQuery获取当前屏幕的高度宽度的实现代码
2011/07/12 Javascript
浅析JavaScript原型继承的陷阱
2013/12/03 Javascript
纯javascript实现简单下拉刷新功能
2015/03/13 Javascript
jquery实现页面虚拟键盘特效
2015/08/08 Javascript
跟我学习javascript的定时器
2015/11/19 Javascript
详解javascript实现自定义事件
2016/01/19 Javascript
node.js 动态执行脚本
2016/06/02 Javascript
全面接触神奇的Bootstrap导航条实战篇
2016/08/01 Javascript
javascript轮播图算法
2016/10/21 Javascript
微信小程序 购物车简单实例
2016/10/24 Javascript
整理关于Bootstrap警示框的慕课笔记
2017/03/29 Javascript
详解Angular 4.x NgIf 的用法
2017/05/22 Javascript
使用JavaScript实现点击循环切换图片效果
2017/09/03 Javascript
编写React组件项目实践分析
2018/03/04 Javascript
react 兄弟组件如何调用对方的方法示例
2018/10/23 Javascript
python删除指定类型(或非指定)的文件实例详解
2015/07/06 Python
Python实现的计算马氏距离算法示例
2018/04/03 Python
一个简单的python爬虫程序 爬取豆瓣热度Top100以内的电影信息
2018/04/17 Python
在mac下查找python包存放路径site-packages的实现方法
2018/11/06 Python
Python3中exp()函数用法分析
2019/02/19 Python
PyCharm 2019.3发布增加了新功能一览
2019/12/08 Python
python exit出错原因整理
2020/08/31 Python
详解python3类型注释annotations实用案例
2021/01/20 Python
HTML5 预加载让页面得以快速呈现
2013/08/13 HTML / CSS
电子狗项圈:eDog Australia
2019/12/04 全球购物
《北京的春节》教学反思
2014/04/07 职场文书
《和田的维吾尔》教学反思
2014/04/14 职场文书
文秘应届生求职信
2014/07/05 职场文书
2015元旦标语横幅
2014/12/09 职场文书
MySQL为id选择合适的数据类型
2021/06/07 MySQL