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 相关文章推荐
javascript Array.remove() 数组删除
Aug 06 Javascript
JavaScript QueryString解析类代码
Jan 17 Javascript
ExtJS判断IE浏览器类型的方法
Feb 10 Javascript
Bootstrap每天必学之简单入门
Nov 19 Javascript
js实现文字跑马灯效果
Feb 23 Javascript
VUE开发一个图片轮播的组件示例代码
Mar 06 Javascript
Vue.js实现网格列表布局转换方法
Aug 25 Javascript
JS对象和字符串之间互换操作实例分析
Feb 02 Javascript
express + jwt + postMan验证实现持久化登录
Jun 05 Javascript
javascript 原型与原型链的理解及应用实例分析
Feb 10 Javascript
浅谈鸿蒙 JavaScript GUI 技术栈
Sep 17 Javascript
vue制作toast组件npm包示例代码
Oct 29 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
建站常用13种PHP开源CMS比较
2009/08/23 PHP
PHP+MYSQL会员系统的开发实例教程
2014/08/23 PHP
PHP图像识别技术原理与实现
2016/10/27 PHP
thinkPHP中钩子的两种配置调用方法详解
2016/11/11 PHP
Javascript 中的 &amp;&amp; 和 || 使用小结
2010/04/25 Javascript
javascript校验价格合法性实例(必须输入2位小数)
2014/05/05 Javascript
jQuery支持动态参数将函数绑定到事件上的方法
2015/03/17 Javascript
通过JS判断联网类型和连接状态的实现代码
2015/04/01 Javascript
JavaScript监听文本框回车事件并过滤文本框空格的方法
2015/04/16 Javascript
如何利用JS通过身份证号获取当事人的生日、年龄、性别
2016/01/22 Javascript
详解JavaScript的另类写法
2016/04/11 Javascript
Ajax使用原生态JS验证用户名是否存在
2020/05/26 Javascript
vue 中swiper的使用教程
2018/05/22 Javascript
node将geojson转shp返回给前端的实现方法
2019/05/29 Javascript
vue集成chart.js的实现方法
2019/08/20 Javascript
[30:00]完美世界DOTA2联赛PWL S2 Rebirth vs LBZS 第二场 11.28
2020/12/01 DOTA
python使用三角迭代计算圆周率PI的方法
2015/03/20 Python
python中将字典形式的数据循环插入Excel
2018/01/16 Python
快速解决安装python没有scripts文件夹的问题
2018/04/03 Python
Python + Requests + Unittest接口自动化测试实例分析
2019/12/12 Python
在python shell中运行python文件的实现
2019/12/21 Python
python GUI库图形界面开发之PyQt5状态栏控件QStatusBar详细使用方法实例
2020/02/28 Python
Python yield的用法实例分析
2020/03/06 Python
详解PyQt5信号与槽的几种高级玩法
2020/03/24 Python
利用Python将图片中扭曲矩形的复原
2020/09/07 Python
python pillow库的基础使用教程
2021/01/13 Python
python re.match()用法相关示例
2021/01/27 Python
英国领先的在线旅游和休闲零售商:lastminute.com
2019/01/23 全球购物
Solid & Striped官网:美国泳装品牌
2019/06/19 全球购物
HomeAway英国:全球领先的度假租赁在线市场
2020/02/03 全球购物
高中语文教学反思
2014/01/16 职场文书
室内趣味活动方案
2014/08/24 职场文书
学雷锋活动简报
2015/07/20 职场文书
分析Java中Map的遍历性能问题
2021/06/26 Java/Android
HTML5 新增内容和 API详解
2021/11/17 HTML / CSS
vue中div禁止点击事件的实现
2022/04/02 Vue.js