vue 内置过滤器的使用总结(附加自定义过滤器)


Posted in Javascript onDecember 11, 2018

前言

vue中过滤器filters的作用是什么?

过滤器是一个通过输入数据,能够及时对数据进行处理并返回一个数据结果的简单函数。Vue有很多很便利的过滤器,可以参考官方文档。

能够帮我们处理快速一些数据的格式----format数据格式化处理。

语法也很简单

{{ message | Filter }}
  • message: 要格式化的数据
  • Filter: 对数据格式化的方法

链式过滤

VueJs允许你链式调用过滤器,简单的来说,就是一个过滤器的输出成为下一个过滤器的输入,然后再次过滤。接下来,我们可以想象一个比较简答的例子,使用了Vue的 filterBy + orderBy 过滤器来过滤所有商品products。过滤出来的产品是属于电器类商品,并且按电器字母排序。

filterBy过滤器 : 过滤器的值必须是一个数组,filterBy + 过滤条件。过滤条件是:‘string || function' + in ‘optionKeyName'

orderBy过滤器 : 过滤器的值必须是一个数组,orderBy + 过滤条件。过滤条件是:‘string || array ||function' + ‘order ≥ 0 为升序 || order < 0 为降序'

接下来,我们可以看下第二个例子:我们有一个商品数组products,我们希望遍历这个数组,并把他们打印成一张清单,这个用v-for很容易实现。

<li v-for="product in products">
 {{ product.name | capitalize }} - {{ product.price | currency }}
</li>

capitalize过滤器 : 将输入的字符串首字母转换成大写字母的过滤器。currency过滤器 : 将输入的数字转换成现金的过滤器。可以跟上货币符号(默认$)和保留的小数位(默认2)。

利用上面的两个过滤器,能够很好的把一个json数组的商品清单格式化成通熟易懂的商品价格清单。

如果只想要电器类商品,可以在v-for上加过滤条件:

<li v-for="product in products | filterBy 'electronics' in 'category' ">
 {{ product.name | capitalize }} - {{ product.price | currency }}
</li>

上面的例子,就是用filterBy 过滤在 'category'中含有'electronics' 关键字的列表,返回的列表就是只含有 'electronics' 关键字的列表。

如果想要多个搜索条件:

<li v-for="product in products | filterBy 'electronics' in 'category' 'name' ">
 {{ product.name | capitalize }} - {{ product.price | currency }}
</li>

上面的例子,就是用filterBy 过滤在 'category' 和 'name' 中含有'electronics' 关键字的列表。

最后我们还需要将这个列表用字母进行排序。我们可以在 filterBy 过滤器的基础上,链式调用orderBy 过滤器。

<ul>
 <li v-for="product in products
   | filterBy 'electronics' in 'category'
   | orderBy 'name' "
 >
  {{ product.name | capitalize }} - {{ product.price | currency }}
 </li>
</ul>

orderBy 的排序方式默认是升序,如果想要降序,只需要加一个小于0的参数:

<li v-for="product in products
  | filterBy 'electronics' in 'category'
  | orderBy 'name' -1 "
>

下面看看vue自带过滤器有哪些,并附带小示例。最后记得看看如果自定义过滤器哦!

vue自带的过滤器

capitalize(首字母大写)

<div class="test">
 {{message | capitalize}}
</div>

<script type="text/javascript">
var myVue = new Vue({
 el: ".test",
 data: {
 message: "javan"
 }
})
</script>

上面代码输出:Javan

uppercase(全部大写)

// 初始message:abc

{{message | uppercase}}

// 上面代码输出:ABC

lowercase(全部小写)

// 初始message:ABC

{{message | lowercase}}

// 上面代码输出:abc

currency(输出金钱以及小数点)

<div class="test">
 {{message | currency}} // 输出$520.13
 {{message | currency '¥' "2"}} //输出 $520.13
</div>
<script type="text/javascript">
 var myVue = new Vue({
 el: ".test",
 data: {
  message: "520.1314"
 }
 })
</script>

第一个参数 {String} [货币符号] - 默认值: '$'
第二个参数 {Number} [小数位] - 默认值: 2

pluralize(变复数)

如果只有一个参数,复数形式只是简单地在末尾添加一个 “s”。如果有多个参数,参数被当作一个字符串数组,对应一个、两个、三个…复数词。如果值的个数多于参数的个数,多出的使用最后一个参数。

<div class="test">
 {{message}} {{message | pluralize 'item'}} 输出: 1 item
 <ul v-for="item in lili">
 <li>
  {{item}} {{item | pluralize 'item'}}
  输出: 1 item 2 items 3 items
 </li>
 </ul>

 <ul v-for="item in lili">
 <li>
  {{item}} {{item | pluralize 'st' 'rd'}}
  输出: 1 st 2 rd 3 rd
 </li>
 </ul>

 <ul v-for="item in man">
 <li>
  {{item}} {{item | pluralize 'item'}}
  输出: 1 item 2 items 3 items
 </li>
 </ul>

 <ul v-for="item in man">
 <li>
  {{item}} {{item | pluralize 'st' 'rd'}}
  输出: 1 st 2 rd 3 rd
 </li>
 </ul>
</div>
<script type="text/javascript">
 var myVue = new Vue({
 el: ".test",
 data: {
  message: 1,
  lili: [1,2,3],
  man: {
  name1: 1,
  name2: 2,
  name3: 3
  }
 }
 })
</script>

debounce(事件延时)

1) 限制: 需在@里面使用
2) 参数:{Number} [wait] - 默认值: 300
3) 功能:包装处理器,让它延迟执行 x ms, 默认延迟 300ms。包装后的处理器在调用之后至少将延迟 x ms, 如果在延迟结束前再次调用,延迟时长重置为 x ms。

<div class="test">
 <button id="btn" @click="doSomeThing | debounce 10000">点击我</button>
</div>
<script type="text/javascript">
 var myVue = new Vue({
 el: ".test",
 methods: {
  doSomeThing: function () {
  // do something
  }
 }
 })
</script>

limitBy(排序)

1) 限制:需在v-for(即数组)里面使用

第一个参数:{Number} 取得数量

第二个参数:{Number} 偏移量

<div class="test">
 <ul v-for="item in lili | limitBy 10">
 <li>{{item}}</li>
 输出1 2 3 4 5 6 7 8 9 10
 </ul>
 <ul v-for="item in lili | limitBy 10 3">
 <li>{{item}}</li>
 输出 4 5 6 7 8 9 10 11 12 13
 </ul>
</div>
<script type="text/javascript">
 var myVue = new Vue({
 el: ".test",
 data: {
  lili: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15]
 }
 })
</script>

filterBy(过滤)

1) 限制:需在v-for(即数组)里面使用

第一个参数: {String | Function} 需要搜索的字符串

第二个参数: in (可选,指定搜寻位置)

第三个参数: {String} (可选,数组格式)

<div class="test">
 <ul v-for="item in lili | filterBy 'o' ">
 <li>{{item}}</li>
 输出oi oa lo ouo oala
 </ul>
 <ul v-for="item in man | filterBy 'l' in 'name' ">
 <li>{{item.name}}</li>
 输出lily lucy
 </ul>
 <ul v-for="item in man | filterBy 'l' in 'name' 'dada' ">
 <li>{{item.name+"+"+item.dada}}</li>
 输出lily+undefined lucy+undefined undefined+lsh
 </ul>
</div>
<script type="text/javascript">
var myVue = new Vue({
 el: ".test",
 data: {
 lili: ["oi", "oa", "ll", "lo" ,"ouo" ,"kk" ,"oala"],
 man: [ //此处注意man是数组,不是对象
 {name: "lily"},
 {name: "lucy"},
 {name: "oo"},
 {dada: "lsh"},
 {dada: "ofg"}
 ]
 }
})
</script>

orderBy(排序)

1) 限制:需在v-for(即数组)里面使用

第一个参数: {String | Array | Function} 需要搜索的字符串

第二个参数: {String} 可选参数 order 决定结果升序(order >= 0)或降序(order < 0),默认是升序

<div class="test">
 遍历数组
 <ul v-for="item in lili | orderBy 'o' 1">
 <li>{{item}}</li>
 输出kk ll oi
 </ul>
 <ul v-for="item in lili | orderBy 'o' -1">
 <li>{{item}}</li>
 输出oi ll kk
 </ul>
 遍历含对象的数组
 <ul v-for="item in man | orderBy 'name' 1">
 <li>{{item.name}}</li>
 输出Bruce Chuck Jackie
 </ul>
 <ul v-for="item in man | orderBy 'name' -1">
 <li>{{item.name}}</li>
 输出Jackie Chuck Bruce
 </ul>
 使用函数排序
 <ul v-for="item in man | orderBy ageByTen">
 <li>{{item.name}}</li>
 输出Bruce Chuck Jackie
 </ul>
</div>
<script type="text/javascript">
 var myVue = new Vue({
 el: ".test",
 data: {
  lili: ["oi", "kk", "ll"],
  man: [ //此处注意man是数组,不是对象
  {
  name: 'Jackie',
  age: 62
  },
  {
  name: 'Chuck',
  age: 76
  },
  {
  name: 'Bruce',
  age: 61
  }
 ]
 },
 methods: {
  ageByTen: function () {
  return 1;
  }
 }
 })
</script>

自定义过滤器

<div class="test">
 {{'2018-11-16 18:12:15'|formatDate}}
</div>
<script type="text/javascript">
 var myVue = new Vue({
 el: ".test",
 methods: {
 },
 filters:{
  formatDate (val) {
  return moment(val).format('YYYY-MM-DD');
  // 这里用到了moment.js
  }
 }
 })
</script>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript Event学习第十章 一些可替换的事件对
Feb 10 Javascript
基于jQuery的表格操作插件
Apr 22 Javascript
推荐40个非常优秀的jQuery插件和教程【系列三】
Nov 09 Javascript
关于JavaScript与HTML的交互事件
Apr 12 Javascript
原生JS实现表单checkbook获取已选择的值
Jul 21 Javascript
使用jQuery在对象中缓存选择器的简单方法
Jun 30 Javascript
jquery按回车键实现表单提交的简单实例
May 25 Javascript
Javascript中构造函数要注意的一些坑
Jan 23 Javascript
微信小程序实现传参数的几种方法示例
Jan 10 Javascript
详解VUE Element-UI多级菜单动态渲染的组件
Apr 25 Javascript
JS左右无缝轮播功能完整实例
May 16 Javascript
vue离开当前页面触发的函数代码
Sep 01 Javascript
Vue入门之数量加减运算操作示例
Dec 11 #Javascript
简单的React SSR服务器渲染实现
Dec 11 #Javascript
Vuex 单状态库与多模块状态库详解
Dec 11 #Javascript
微信小程序实现slideUp、slideDown滑动效果及点击空白隐藏功能示例
Dec 11 #Javascript
微信小程序实现两个页面传值的方法分析
Dec 11 #Javascript
jQuery使用bind动态绑定事件无效的处理方法
Dec 11 #jQuery
微信小程序实现的3d轮播图效果示例【基于swiper组件】
Dec 11 #Javascript
You might like
PHP中通过ADO调用Access数据库的方法测试不通过
2006/12/31 PHP
PHP define函数的使用说明
2008/08/27 PHP
php中执行系统命令的方法
2015/03/21 PHP
thinkPHP5.0框架验证码调用及点击图片刷新简单实现方法
2018/09/07 PHP
设定php简写功能的方法
2019/11/28 PHP
jquery cookie插件代码类
2009/05/26 Javascript
数组Array进行原型prototype扩展后带来的for in遍历问题
2010/02/07 Javascript
关于jquery的多个选择器的使用示例
2013/10/18 Javascript
Node.js模拟浏览器文件上传示例
2014/03/26 Javascript
Backbone.js 0.9.2 源码注释中文翻译版
2015/06/25 Javascript
用JS生成UUID的方法实例
2016/03/30 Javascript
AngularJS 表达式详解及实例代码
2016/09/14 Javascript
jquery插件bootstrapValidator数据验证详解
2016/11/09 Javascript
[05:06]TI4西雅图DOTA2前线报道 海涛密探LGD训练
2014/07/09 DOTA
[01:09:24]Ti4开幕式
2014/07/19 DOTA
[40:19]完美世界DOTA2联赛PWL S3 Rebirth vs CPG 第二场 12.18
2020/12/19 DOTA
Python二叉搜索树与双向链表转换实现方法
2016/04/29 Python
利用python爬取斗鱼app中照片方法实例
2017/12/03 Python
Python中property属性实例解析
2018/02/10 Python
利用Python yagmail三行代码实现发送邮件
2018/05/11 Python
解决python3 安装完Pycurl在import pycurl时报错的问题
2018/10/15 Python
python中的线程threading.Thread()使用详解
2019/12/17 Python
python sklearn包——混淆矩阵、分类报告等自动生成方式
2020/02/28 Python
django中的数据库迁移的实现
2020/03/16 Python
Django 解决由save方法引发的错误
2020/05/21 Python
欧洲有机婴儿食品最大的市场:Organic Baby Food(供美国和加拿大)
2018/03/28 全球购物
Fnac西班牙官网:法国文化和电子产品零售商
2021/03/14 全球购物
新加坡鲜花速递/新加坡网上花店:Ferns N Petals
2020/08/29 全球购物
旅游管理专业学生求职信
2013/09/28 职场文书
银行类自荐信
2014/02/04 职场文书
安全责任书范本
2014/04/15 职场文书
霸气押韵的班级口号
2014/06/09 职场文书
群众路线四风问题整改措施
2014/09/27 职场文书
培训师岗位职责
2015/02/14 职场文书
MySQL创建索引需要了解的
2021/04/08 MySQL
老生常谈 使用 CSS 实现三角形的技巧(多种方法)
2021/04/13 HTML / CSS