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 相关文章推荐
showModalDialog 和 showModelessDialog
Jan 22 Javascript
js 有框架页面跳转(target)三种情况下的应用
Apr 09 Javascript
微信WeixinJSBridge API使用实例
May 25 Javascript
移动Web中图片自适应的两种JavaScript解决方法
Jun 18 Javascript
浅谈使用MVC模式进行JavaScript程序开发
Nov 10 Javascript
AngularJs  Using $location详解及示例代码
Sep 02 Javascript
Vue.js学习之过滤器详解
Jan 22 Javascript
layui文件上传实现代码
May 20 Javascript
JavaScript中concat复制数组方法浅析
Jan 20 Javascript
vue实现Input输入框模糊查询方法
Jan 29 Javascript
npm qs模块使用详解
Feb 07 Javascript
JavaScript架构搭建前端监控如何采集异常数据
Jun 25 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
丧钟首部独立剧集《丧钟:骑士与龙》北美正式开播,场面血腥
2020/04/09 欧美动漫
php 无限级缓存的类的扩展
2009/03/16 PHP
PHP图片处理之使用imagecopyresampled函数裁剪图片例子
2014/11/19 PHP
PHP常用技巧汇总
2016/03/04 PHP
解决windows上php xdebug 无法调试的问题
2020/02/19 PHP
FireFox中textNode分片的问题
2007/04/10 Javascript
单击按钮显示隐藏子菜单经典案例
2013/01/04 Javascript
基于jquery插件实现常见的幻灯片效果
2013/11/01 Javascript
JavaScript函数定义的常见注意事项小结
2014/09/16 Javascript
JavaScript onkeydown事件入门实例(键盘某个按键被按下)
2014/10/17 Javascript
CSS3实现动态背景登录框的代码
2015/07/28 Javascript
简单介绍jsonp 使用小结
2016/01/27 Javascript
彻底搞懂JavaScript中的apply和call方法(必看)
2017/09/18 Javascript
jQuery实现动态添加节点与遍历节点功能示例
2017/11/09 jQuery
jquery拖拽自动排序插件使用方法详解
2020/07/20 jQuery
node.js处理前端提交的GET请求
2019/08/30 Javascript
layui固定下拉框的显示条数(有滚动条)的方法
2019/09/10 Javascript
JS扁平化输出数组的2种方法解析
2019/09/17 Javascript
jQuery HTML获取内容和属性操作实例分析
2020/05/20 jQuery
Vue.js中Line第三方登录api的实现代码
2020/06/29 Javascript
vscode中Vue别名路径提示的实现
2020/07/31 Javascript
JavaScript判断数据类型有几种方法及区别介绍
2020/09/02 Javascript
[32:26]EG vs IG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python合并文本文件示例
2014/02/07 Python
python局域网ip扫描示例分享
2014/04/03 Python
浅谈python函数调用返回两个或多个变量的方法
2019/01/23 Python
Python matplotlib修改默认字体的操作
2020/03/05 Python
实现ECharts双Y轴左右刻度线一致的例子
2020/05/16 Python
keras 读取多标签图像数据方式
2020/06/12 Python
Pycharm安装python库的方法
2020/11/24 Python
利用CSS3把图片变成灰色模式的实例代码
2016/09/06 HTML / CSS
详解CSS3弹性伸缩盒
2020/09/21 HTML / CSS
iframe在移动端的缩放的示例代码
2018/10/12 HTML / CSS
上海微创软件面试题
2012/06/14 面试题
买房委托公证书
2014/04/08 职场文书
物资采购方案
2014/06/12 职场文书