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使用手册之 事件处理
Mar 24 Javascript
EasyUi tabs的高度与宽度根据IE窗口的变化自适应代码
Oct 26 Javascript
innerHTML与jquery里的html()区别介绍
Oct 12 Javascript
JQuery 中几个类选择器的简单使用介绍
Mar 14 Javascript
javascript放大镜效果的简单实现
Dec 09 Javascript
浅谈JavaScript Math和Number对象
Jan 26 Javascript
jQuery判断checkbox选中状态
May 12 Javascript
JS实现数组去重方法总结(六种方法)
Jul 14 Javascript
Vue组件通信的四种方式汇总
Feb 08 Javascript
详解Angular cli配置过程记录
Nov 07 Javascript
微信小程序实现组件顶端固定或底端固定效果(不随滚动而滚动)
Apr 09 Javascript
Nuxt.js的路由跳转操作(页面跳转nuxt-link)
Nov 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中的按位与和按位或操作示例
2014/01/27 PHP
php+ajax实现图片文件上传功能实例
2014/06/17 PHP
深入解析PHP的Yii框架中的event事件机制
2016/03/17 PHP
解决Yii2邮件发送结果返回成功,但接收不到邮件的问题
2017/05/23 PHP
php实现和c#一致的DES加密解密实例
2017/07/24 PHP
PHP 对象继承原理与简单用法示例
2020/04/21 PHP
java script编程起步(第三课)
2007/01/10 Javascript
JS连连看源码完美注释版(推荐)
2013/12/09 Javascript
jQuery中hasClass()方法用法实例
2015/01/06 Javascript
javascript关于open.window子页面执行完成后刷新父页面的问题分析
2015/04/27 Javascript
jQuery头像裁剪工具jcrop用法实例(附演示与demo源码下载)
2016/01/22 Javascript
jqueryMobile 动态添加元素,展示刷新视图的实现方法
2016/05/28 Javascript
jQuery组件easyui基本布局实现代码
2016/08/25 Javascript
js实现开启密码大写提示
2016/12/21 Javascript
关于vuex的学习实践笔记
2017/04/05 Javascript
JS实现闭包中的沙箱模式示例
2017/09/07 Javascript
一个简易时钟效果js实现代码
2020/03/25 Javascript
javascript将json格式数组下载为excel表格的方法
2017/12/22 Javascript
详解ES6系列之私有变量的实现
2018/11/21 Javascript
nodejs npm错误Error:UNKNOWN:unknown error,mkdir 'D:\Develop\nodejs\node_global'at Error
2019/03/02 NodeJs
JS中的算法与数据结构之列表(List)实例详解
2019/08/16 Javascript
Vue使用vue-recoure + http-proxy-middleware + vuex配合promise实现基本的跨域请求封装
2019/10/21 Javascript
vue+element实现图片上传及裁剪功能
2020/06/29 Javascript
nuxt.js 在middleware(中间件)中实现路由鉴权操作
2020/11/06 Javascript
原生js实现滑块区间组件
2021/01/20 Javascript
[01:05:56]2018DOTA2亚洲邀请赛3月29日 小组赛A组 Newbee VS VG
2018/03/30 DOTA
[01:06:54]DOTA2-DPC中国联赛 正赛 RNG vs Dragon BO3 第一场 1月24日
2021/03/11 DOTA
python备份文件的脚本
2008/08/11 Python
Python学习笔记整理3之输入输出、python eval函数
2015/12/14 Python
Python参数传递机制传值和传引用原理详解
2020/05/22 Python
使用HTML5的Notification API制作web通知的教程
2015/05/08 HTML / CSS
墨西哥运动服饰和鞋网上商店:Netshoes墨西哥
2016/07/28 全球购物
校车安全责任书
2014/08/25 职场文书
党员检讨书范文
2014/12/27 职场文书
2015年员工试用期工作总结
2015/05/28 职场文书
win10如何更改appdata文件夹的默认位置?
2022/07/15 数码科技