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 相关文章推荐
PNG背景在不同浏览器下的应用
Jun 22 Javascript
IE无法设置短域名下Cookie
Sep 23 Javascript
jQuery之自动完成组件的深入解析
Jun 19 Javascript
JavaScript获取当前页面上的指定对象示例代码
Feb 28 Javascript
jQuery+PHP实现可编辑表格字段内容并实时保存
Oct 09 Javascript
js 截取或者替换字符串中的数字实现方法
Jun 13 Javascript
详解原生js实现offset方法
Jun 15 Javascript
React 使用browserHistory项目访问404问题解决
Jun 01 Javascript
原生javascript制作贪吃蛇小游戏的方法分析
Feb 26 Javascript
vue-simple-uploader上传成功之后的response获取代码
Sep 07 Javascript
小程序实现左滑删除的效果的实例代码
Oct 19 Javascript
JavaScript实现队列结构过程
Dec 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制作静态网站的模板框架
2006/10/09 PHP
PHP实现把文本中的URL转换为链接的auolink()函数分享
2014/07/29 PHP
php中final关键字用法分析
2016/12/07 PHP
Javascript匿名函数的一种应用 代码封装
2010/06/27 Javascript
基于jquery的滚动鼠标放大缩小图片效果
2011/10/27 Javascript
js函数调用常用方法详解
2012/12/03 Javascript
javascript当中的代码嗅探扩展原生对象和原型(prototype)
2013/01/11 Javascript
jquery时间下拉框小例子
2013/04/15 Javascript
分享12个实用的jQuery代码片段
2016/03/09 Javascript
javascript和jquery实现用户登录验证
2016/05/04 Javascript
AngularJS实现Input格式化的方法
2016/11/07 Javascript
JavaScript中数据类型转换总结
2016/12/25 Javascript
js仿搜狐视频记录片列表展示效果
2020/05/30 Javascript
微信小程序获取用户openId的实现方法
2017/05/23 Javascript
EasyUI实现下拉框多选功能
2017/11/07 Javascript
D3.js实现拓扑图的示例代码
2018/06/30 Javascript
Vue加载json文件的方法简单示例
2019/01/28 Javascript
Python模拟登录12306的方法
2014/12/30 Python
Python二叉树定义与遍历方法实例分析
2018/05/25 Python
Python中PyQt5/PySide2的按钮控件使用实例
2019/08/17 Python
使用python代码进行身份证号校验的实现示例
2019/11/21 Python
NumPy统计函数的实现方法
2020/01/21 Python
python实现俄罗斯方块小游戏
2020/04/24 Python
python爬虫基础知识点整理
2020/06/02 Python
html5实现九宫格抽奖可固定抽中某项奖品
2020/06/15 HTML / CSS
浅析HTML5 Landmark
2020/09/11 HTML / CSS
欧舒丹澳洲版:L’OCCITANE
2017/07/17 全球购物
UGG美国官网:购买UGG雪地靴、拖鞋和鞋子
2017/12/31 全球购物
英国最大的纸工艺品商店:CraftStash
2018/12/01 全球购物
单位领导证婚词
2014/01/14 职场文书
祖国在我心中演讲稿600字
2014/09/23 职场文书
预备党员群众路线思想汇报2014
2014/10/25 职场文书
干货!开幕词的写作方法
2019/04/02 职场文书
未来,这5大方向都很适合创业
2019/07/22 职场文书
用golang如何替换某个文件中的字符串
2021/04/25 Golang
AJAX实现省市县三级联动效果
2021/10/16 Javascript