博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Vue过滤器
阅读量:6341 次
发布时间:2019-06-22

本文共 3373 字,大约阅读时间需要 11 分钟。

在了解过滤器之前,我们需要明确一个概念--过滤器,本质上都是函数。其作用在于用户输入数据后,它能够进行处理,并返回一个数据结果。Vue.js与AngularJS中的过滤器语法有些类似,使用管道符(|)进行连接。

一、内置过滤器

  Vue.js内置了一系列常用的过滤器,可以直接进行调用。这些内置过滤器都相对比较简单,如果要实现比较复杂或者需要定制的过滤功能,还需要借助自定义过滤器的方式。当然,这些内置的过滤器使用时无须定义,使用起来比较容易。

1.字母操作

  Vue.js内置了capitalize、uppercase、lowercase三个过滤器用于处理英文字符。注:这三个过滤器仅针对英文字符串使用。

  1.capitalize

  capitalize过滤器用于将表达式中的首字母转换为大写形式。代码示例如下:

{
{'ddfe' | capitalize}}//'ddfe'=>'Ddfe'

  2.uppercase

  uppercase过滤器用于将表达式中的所有字母转换为大写形式。代码示例如下:

{
{'ddfe' | uppercase}}//'ddfe'=>'DDFE'

  3.lowercase

  lowercase过滤器用于将表达式中的所有字母转换为小写形式。代码示例如下:

{
{'DDFE'} | lowercase}//'DDFE' => 'ddfe'

2.json过滤器

  Vue.js中的json过滤器本质上是JSON.stringify()的精简缩略版,可将表达式的值转换为JSON字符串,即输出表达式经过JSON.stringify()处理后的结果。json可接受一个类型为Number的参数,用于决定转换后的JSON字符串的缩进距离,如果不输入该参数,则默认为2。代码示例如下:

{
{didiFamily | json 4}}
/*以四个空格的缩进打印一个对象:didiFamily:{'name':'ddfe','age':3}=>{ 'name':'ddfe', 'age':3}*/

3.限制

  Vue.js中内置了limitBy、filterBy、orderBy三个过滤器用于处理并返回过滤后的数组,比如与v-for搭配使用。注意,这三个过滤器所处理的表达式的值必须是数组,否则程序会报错。

  1.limitBy

  limitBy过滤器的作用是限制数组为开始的前N个元素,其中N由传入的第一个参数指定。第二个参数可选,用于指定开始的偏移量,默认为0,即不偏移。如果第二个参数为5,则表示从数组下标为5的地方开始计数。代码示例如下:

//只显示开始的10个元素

  2.filterBy

  filterBy过滤器的使用比较灵活,其第一个参数可以是字符串或者函数。过滤条件是:'string||function'+in+'optionKeyName'。

  如果第一个参数是字符串,那么将在每个数组元素中搜索它,并返回包含该字符串的元素组成的数组。代码示例如下:

  上例中,只显示包含hello字符串的元素。

  如果item是一个对象,过滤器将递归地在它所有的属性中搜索。为了缩小搜索范围,可以指定一个搜索字段。代码示例如下:

  上例中,过滤器只在用户对象的name属性中搜索ddfe。最好始终限制搜索范围以提高效率与性能。

  3.orderBy

  orderBy过滤器的作用是返回排序后的数组。过滤条件是:'string || array ||function' + 'order≥0为升序 || order<0为降序'。第一个参数可以是字符串、数组或者函数。第二个参数order可选,决定结果为升序或降序排列,默认为1,即升序排列。

  若输入参数为字符串,则可同时传入多个字符串作为排序键名,字符串之间以空格分隔。代码示例如下:

  

  • {
    {user.lastName}} {
    {user.firstName}} {
    {user.age}}

  此时将按照传入的排序键名的先后顺序进行排序。

  注:事实上,当传入参数为字符串或者数组时,最终调用的也是sort()函数,只不过Vue.js提前作了一些处理,比如设置了默认的compare函数等,根据传入的compare函数进行排序。

4.currency过滤器

  currency过滤器的作用是将数字值转换为货币形式输出。其第一个参数接受类型为String的货币符号,如果不输入,则默认为美元符号$。第二个参数接受类型为Number的小数位,如果不输入,则默认为2。注意,如果第一个参数采取默认形式,而需要第二个参数修改小数位,则第一个参数不可省略。代码示例如下:

{
{amount | currency}}//12345 => $12345.00

  使用其他符号,比如人民币符号,代码示例如下:

{
{amount | currency '¥'}}//12345 => ¥12345.00

5.debounce过滤器

  debounce过滤器的作用是延迟处理器一定的时间执行。其接受的表达式的值必须为函数,因此其一般与v-on等指令结合使用。debounce接受一个可选的参数作为延迟时间,单位为毫秒。如果没有该参数,则默认的延迟时间为300毫秒。经过debounce包装的处理器在调用之后将至少延迟设定的时间再执行。如果在延迟结束前再次调用,则延迟时长将重置为设定的时间。通常,在监听用户input事件时使用debounce过滤器比较有用,可以防止频繁调用方法,debounce的用法参考如下:

二、自定义过滤器

  大多数情况下,Vue.js中内置的过滤器并不能满足我们的需求,好在Vue.js还提供了自定义过滤器的API供用户进行功能扩展。

1.filter语法

  在Vue.js中也存在一个全局函数Vue.filter用于构造过滤器:

Vue.filter(ID,function(){})

  该函数接受两个参数,其中第一个参数为过滤器ID,作为用户自定义过滤器的唯一标识;第二个参数则为具体的过滤器函数。过滤器函数以值为参数,返回转换后的值。

  1.单个参数

  注册一个名为reverse的过滤器,作用是将字符串反转输出。代码示例如下:

Vue.filter('reverse',function(value){    return value.split('').reverse().join('');})//'abc' => 'cba'

  2.多参数

  过滤器函数除了以值为参数外,还支持接受任意数量的参数,参数之间以空格分隔。代码示例如下:

Vue.filter('wrap',function(value,begin,end){   return begin + value +end })//'hello' => 'before hello after'

  3.双向过滤器

  上面的过滤器函数都是在Model数据输出到View层之前进行数据转化的,实际上Vue.js还支持把来自视图(input元素)的值在写回模型前进行转化,即双向过滤器。代码如下

Vue.filter(id,{   //model -> view    //read 函数可选   read:function(val){},   //view -> model   //write函数将在数据被写入Model之前调用   //两个参数分别为表达式的新值和旧值   write:function(newVal,oldVal){}      })

  4.动态参数

  filter语法还有一个需要注意的点:动态参数。如果过滤器参数没有用引号包起来,则它会在当前vm作用域内动态计算。此外,过滤器函数的this始终指向调用它的vm。

转载于:https://www.cnblogs.com/yc-1314/p/10243361.html

你可能感兴趣的文章
Gradle入门系列(5):创建多项目构建
查看>>
关于Ionic、React Native、Native的那些事
查看>>
《HelloGitHub》第 35 期
查看>>
Java synchronized
查看>>
谈谈关于前端的缓存的问题
查看>>
JavaScript 将一个数组插入到另一个数组的指定位置中
查看>>
面试中关于spring问题的回顾总结(一)
查看>>
知其然知其所以然之LinkedList常用源码阅读
查看>>
redis 安装及安装遇到的问题解决
查看>>
为什么React获取数据是在componentDidMount
查看>>
每日 30 秒 ⏱ 优雅初始化数组
查看>>
Python装饰器高级用法
查看>>
Git安装 for windows
查看>>
我统计了掘金前端面试文章出现的比例
查看>>
请给Sprint Boot多一些内存
查看>>
T 沙龙移动实践日总结 ——享物说大流量⼩程序的架构与性能优化方案
查看>>
浏览器渲染网页的过程
查看>>
聊聊系统平均负载
查看>>
斗鱼做直播已经年收益突破40亿:一对一在线直播程序源码、直播网站搭建就找布谷科技...
查看>>
深入理解Vue源码系列-6.认识下virtual dom
查看>>