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 匿名函数的理解(透彻版)
Jan 28 Javascript
jquery跨域请求示例分享(jquery发送ajax请求)
Mar 25 Javascript
ExtJS4 动态生成的grid导出为excel示例
May 02 Javascript
IE 下Enter提交表单存在重复提交问题的解决方法
May 04 Javascript
jquery实现鼠标滑过显示提示框的方法
Feb 05 Javascript
JS 实现倒计时数字时钟效果【附实例代码】
Mar 30 Javascript
AngularJS路由删除#符号解决的办法
Sep 28 Javascript
jQuery pagination分页示例详解
Oct 23 jQuery
vuex存储token示例
Nov 11 Javascript
简述Vue中容易被忽视的知识点
Dec 09 Javascript
JS数组方法join()用法实例分析
Jan 18 Javascript
JS实现网页端猜数字小游戏
Mar 06 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和mysql的简单的dao类实现crud操作功能
2014/01/27 PHP
PHP判断浏览器、判断语言代码分享
2015/03/05 PHP
如何打开php的gd2库
2017/02/09 PHP
javascript第一课
2007/02/27 Javascript
iframe 上下滚动条如何默认在下方实现原理
2012/12/10 Javascript
JS Pro-深入面向对象的程序设计之继承的详解
2013/05/07 Javascript
javascript的switch用法注意事项分析
2015/02/02 Javascript
js实现iGoogleDivDrag模块拖动层拖动特效的方法
2015/03/04 Javascript
jQuery 3.0 的变化及使用方法
2016/02/01 Javascript
jquery zTree异步加载简单实例讲解
2016/02/25 Javascript
JavaScript_ECMA5数组新特性详解
2016/06/12 Javascript
bootstrap table 表格中增加下拉菜单末行出现滚动条的快速解决方法
2017/01/05 Javascript
Vue.js 2.0窥探之Virtual DOM到底是什么?
2017/02/10 Javascript
js使用i18n实现页面国际化的方法
2017/05/09 Javascript
JS使用插件cryptojs进行加密解密数据实例
2017/05/11 Javascript
js实现网页的两个input标签内的数值加减(示例代码)
2017/08/15 Javascript
基于Bootstrap table组件实现多层表头的实例代码
2017/09/07 Javascript
纯JS实现可用于页码更换的飞页特效示例
2018/05/21 Javascript
JS实现面向对象继承的5种方式分析
2018/07/21 Javascript
jquery 插件重新绑定的处理方法分析
2019/11/23 jQuery
javascript实现贪吃蛇经典游戏
2020/04/10 Javascript
Tensorflow 合并通道及加载子模型的方法
2018/07/26 Python
python读取文本中的坐标方法
2018/10/14 Python
浅析Python 读取图像文件的性能对比
2019/03/07 Python
Python Django基础二之URL路由系统
2019/07/18 Python
基于python实现破解滑动验证码过程解析
2020/05/28 Python
python实现PDF中表格转化为Excel的方法
2020/06/16 Python
纯CSS实现聊天框小尖角、气泡效果
2014/04/04 HTML / CSS
zooplus波兰:在线宠物店
2019/07/21 全球购物
商场促销活动总结
2014/07/10 职场文书
商场促销活动策划方案
2014/08/18 职场文书
防灾减灾日活动总结
2014/08/26 职场文书
毕业证代领委托书
2014/09/26 职场文书
2016年党校科级干部培训班学习心得体会
2016/01/06 职场文书
《大禹治水》教学反思
2016/02/22 职场文书
Mysql数据库手动及定时备份步骤
2021/11/07 MySQL