Vue过滤器

Posted 2021-02-08 yc-1314

在了解过滤器之前，我们需要明确一个概念--过滤器，本质上都是函数。其作用在于用户输入数据后，它能够进行处理，并返回一个数据结果。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。代码示例如下:

<pre>{{didiFamily | json 4}}</pre>
/*
以四个空格的缩进打印一个对象：
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个元素
<div v-for="item in items | limitBy 10"></div>

　　2.filterBy

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

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

<div v-for="item in items | filterBy ‘hello‘"></div>

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

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

<div v-for="member in  didiFamily | filterBy ‘ddfe‘ in ‘name‘"></div>

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

　　3.orderBy

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

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

　　

<ul>
    <li v-for="user in users | orderBy ‘lastName‘ ‘firstName‘ ‘age‘">
        {{user.lastName}} {{user.firstName}} {{user.age}}
    </li>
</ul>

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

　　注：事实上，当传入参数为字符串或者数组时，最终调用的也是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的用法参考如下:

<input @keyup="onKeyup | debounce 500">

二、自定义过滤器

　　大多数情况下，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(‘‘);
})
<span v-text="message | reverse"></span>
//‘abc‘ => ‘cba‘

　　2.多参数

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

Vue.filter(‘wrap‘,function(value,begin,end){
   return begin + value +end 
})
<span v-text="message | wrap ‘before‘ ‘after‘"></span>
//‘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。