Vue.js学习之过滤器详解


Posted in Javascript onJanuary 22, 2017

前言

在这个教程中,我们将会通过几个例子,了解和学习VueJs的过滤器。阅读这这篇文中的前提是你对Vue已经有了基本的语法基础。

Vue.Js中的过滤器基础

过滤器是一个通过输入数据,能够及时对数据进行处理并返回一个数据结果的简单函数。Vue有很多很便利的过滤器,可以参考官方文档, http://cn.vuejs.org/api/#过滤器 ,过滤器通常会使用管道标志 “ | ”, 比如:

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

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

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家学习或者使用vue能带来一定的帮助,如果有疑问大家可以留言交流。

Javascript 相关文章推荐
javascript实现轮显新闻标题链接
Aug 13 Javascript
循环 vs 递归浅谈
Feb 28 Javascript
点击进行复制的JS代码实例
Aug 23 Javascript
table对象中的insertRow与deleteRow使用示例
Jan 26 Javascript
jQuery Validation PlugIn的使用方法详解
Dec 18 Javascript
jQuery插件扩展extend的简单实现原理
Jun 24 Javascript
js点击时关闭该范围下拉菜单之外的菜单方法
Jan 11 Javascript
JS处理一些简单计算题
Feb 24 Javascript
微信小程序实现之手势锁功能实例代码
Jul 19 Javascript
JS解析后台返回的JSON格式数据实例
Aug 06 Javascript
Vue 与 Vuex 的第一次接触遇到的坑
Aug 16 Javascript
JavaScript实现五子棋小游戏
Oct 26 Javascript
Jquery与Bootstrap实现后台管理页面增删改查功能示例
Jan 22 #Javascript
Ionic 2 实现列表滑动删除按钮的方法
Jan 22 #Javascript
Vue.js学习之计算属性
Jan 22 #Javascript
ionic中列表项增加和删除的实现方法
Jan 22 #Javascript
JQueryEasyUI框架下的combobox的取值和绑定的方法
Jan 22 #Javascript
jQuery学习之DOM节点的插入方法总结
Jan 22 #Javascript
select下拉框插件jquery.editable-select详解
Jan 22 #Javascript
You might like
DC的38部超级英雄动画电影
2020/03/03 欧美动漫
用 php 编写的日历
2006/10/09 PHP
使用php4加速网络传输
2006/10/09 PHP
php中的filesystem文件系统函数介绍及使用示例
2014/02/13 PHP
ThinkPHP文件上传实例教程
2014/08/22 PHP
PHP下载远程文件到本地存储的方法
2015/03/24 PHP
thinkPHP框架实现的短信接口验证码功能示例
2018/06/20 PHP
Laravel5.5 动态切换多语言的操作方式
2019/10/25 PHP
[原创]用javascript实现检测指定目录是否存在的方法
2008/01/12 Javascript
Javascript匿名函数的一种应用 代码封装
2010/06/27 Javascript
关于jQuery $.isNumeric vs. $.isNaN vs. isNaN
2013/04/15 Javascript
用javascript判断IE版本号简单实用且向后兼容
2013/09/11 Javascript
根据配置文件加载js依赖模块
2014/12/29 Javascript
js中javascript:void(0) 真正含义
2020/11/05 Javascript
浅析Nodejs npm常用命令
2016/06/14 NodeJs
js运动事件函数详解
2016/10/21 Javascript
使用BootStrap实现标签切换原理解析
2017/03/14 Javascript
VUE2.0+Element-UI+Echarts封装的组件实例
2018/03/02 Javascript
详解JavaScript 的变量
2019/03/08 Javascript
vue通信方式EventBus的实现代码详解
2019/06/10 Javascript
layui使用数据表格实现购物车功能
2019/07/26 Javascript
JS数组方法concat()用法实例分析
2020/01/18 Javascript
Element中Slider滑块的具体使用
2020/07/29 Javascript
js 数据类型判断的方法
2020/12/03 Javascript
解决Django migrate No changes detected 不能创建表的问题
2018/05/27 Python
Python中出现IndentationError:unindent does not match any outer indentation level错误的解决方法
2020/04/18 Python
python PIL/cv2/base64相互转换实例
2020/01/09 Python
解决运行django程序出错问题 'str'object has no attribute'_meta'
2020/07/15 Python
巧用HTML5给按钮背景设计不同的动画简单实例
2016/08/09 HTML / CSS
土耳其新趋势女装购物网站:Addax
2020/01/07 全球购物
面试通知邮件
2015/04/20 职场文书
困难补助申请报告
2015/05/19 职场文书
四年级数学教学反思
2016/02/16 职场文书
90条交通安全宣传标语
2019/10/12 职场文书
Python代码,能玩30多款童年游戏!这些有几个是你玩过的
2021/04/27 Python
python三子棋游戏
2022/05/04 Python