Vue.js -- 过滤器使用总结


Posted in Javascript onFebruary 18, 2017

过滤器是一个通过输入数据,能够及时对数据进行处理并返回一个数据结果的简单函数。Vue有很多很便利的过滤器,过滤器通常会使用管道标志 “ | ”, 比如:

{{ 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);
    }
  }
})

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery live
May 15 Javascript
js 获取(接收)地址栏参数值的方法
Apr 01 Javascript
按钮接受回车事件的三种实现方法
Jun 06 Javascript
推荐10 个很棒的 jQuery 特效代码
Oct 04 Javascript
js跨浏览器的事件侦听器和事件对象的使用方法
Dec 17 Javascript
分享一个插件实现水珠自动下落效果
Jun 01 Javascript
angular2倒计时组件使用详解
Jan 12 Javascript
vue router使用query和params传参的使用和区别
Nov 13 Javascript
Vue 创建组件的两种方法小结(必看)
Feb 23 Javascript
JavaScript键盘事件常见用法实例分析
Jan 03 Javascript
Element PageHeader页头的使用方法
Jul 26 Javascript
微信小程序实现点击导航条切换页面
Nov 19 Javascript
JS打开摄像头并截图上传示例
Feb 18 #Javascript
Android中Okhttp3实现上传多张图片同时传递参数
Feb 18 #Javascript
AngularJS表单提交实例详解
Feb 18 #Javascript
JS实现控制图片显示大小的方法【图片等比例缩放功能】
Feb 18 #Javascript
JS实现数组去重复值的方法示例
Feb 18 #Javascript
bootstarp modal框居中显示的实现代码
Feb 18 #Javascript
JS实现本地存储信息的方法(基于localStorage与userData)
Feb 18 #Javascript
You might like
php基础学习之变量的使用
2011/06/09 PHP
解析获取优酷视频真实下载地址的PHP源代码
2013/06/26 PHP
改写ThinkPHP的U方法使其路由下分页正常
2014/07/02 PHP
PHP正则验证Email的方法
2015/06/15 PHP
php empty 函数判断结果为空但实际值却为非空的原因解析
2018/05/28 PHP
JavaScript实际应用:innerHTMl和确认提示的使用
2006/06/22 Javascript
JS控件autocomplete 0.11演示及下载 1月5日已更新
2007/01/09 Javascript
利用ASP发送和接收XML数据的处理方法与代码
2007/11/13 Javascript
JS 两个字符串时间的天数差计算
2013/08/25 Javascript
实例讲解JQuery中this和$(this)区别
2014/12/08 Javascript
动态创建按钮的JavaScript代码
2016/01/29 Javascript
jQuery 3 中的新增功能汇总介绍
2016/06/12 Javascript
BootStrap表单控件之文本域textarea
2017/05/23 Javascript
js 图片转base64的方式(两种)
2018/04/24 Javascript
vue与bootstrap实现简单用户信息添加删除功能
2019/02/15 Javascript
利用vue重构有赞商城的思路以及总结整理
2019/02/21 Javascript
浅谈layui分页控件field参数接收对象的问题
2019/09/20 Javascript
原生JS实现顶部导航栏显示按钮+搜索框功能
2019/12/25 Javascript
vue开发中遇到的问题总结
2020/04/07 Javascript
jQuery实现动态操作table行
2020/11/23 jQuery
Python 删除连续出现的指定字符的实例
2018/06/29 Python
python word转pdf代码实例
2019/08/16 Python
python 实现多线程下载视频的代码
2019/11/15 Python
python 实现一个简单的线性回归案例
2020/12/17 Python
世界顶级足球门票网站:Live Football Tickets
2017/10/14 全球购物
夏尔巴人登珠峰品牌:Sherpa Adventure Gear
2018/02/08 全球购物
StringBuilder和String的区别
2015/05/18 面试题
给排水专业应届生求职信
2013/10/12 职场文书
2014国培学习感言
2014/03/05 职场文书
2014年大学生党员评议表自我评价
2014/09/20 职场文书
2015年度党员自我评价范文
2015/03/03 职场文书
2015年加油站工作总结
2015/05/13 职场文书
银行资信证明
2015/06/17 职场文书
小学班主任教育随笔
2015/08/15 职场文书
社区宣传标语口号
2015/12/26 职场文书
总结Python变量的相关知识
2021/06/28 Python