标签：对象 最好 ever option 全局 代码示例 单位 情况 缩小
在了解过滤器之前，我们需要明确一个概念--过滤器，本质上都是函数。其作用在于用户输入数据后，它能够进行处理，并返回一个数据结果。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。
标签：对象 最好 ever option 全局 代码示例 单位 情况 缩小
原文地址：https://www.cnblogs.com/yc-1314/p/10243361.html
