过滤器

1、过滤器

过滤器——本质上都是函数。作用在于用户输入数据后，它能够进行处理，并返回一个数据结果。使用管道符（|）进行连接。如：

{{'abc' | uppercase}}  //'abc' => 'ABC'

Vue.js支持在任何出现表达式的地方添加过滤器。如：

• 在{{}}的表达式
• 在绑定指令的表达式后调用

如：<span v-text="message" | uppercase></span>

过滤器可以接受参数，参数跟在过滤器名称后面，参数之间用空格分隔。如：

{{message | filterFunction 'arg1' arg2}}

需要强调的是：

• 过滤器函数将始终以表达式的值作为第一个参数，message将作为第一个参数；
• 字符串arg1作为第二个参数；
• 表达式arg2的值在计算出来之后作为第三个参数传给过滤器。    

       Vue.js的过滤器支持链式调用，上一个过滤器的输出结果可以作为下一个过滤器的的输入。

如：<span>{{'ddef' | capitalize | reverse}}</span>

2、内置过滤器——字母操作

Vue.js内置了capitalize 、uppercase、lowercase三个过滤器用于处理英文字母。

（1）capitalize

     capitalize 过滤器用于将表达式中的首字母转换为大写形式。如：

 {{'abce' | capitalize}}  //'abce' => 'Abce'

（2）uppercase

     uppercase过滤器用于将表达式中的所有字母转换为大写

（3）lowercase

lowercase过滤器用于将表达式中的所有字母转换为大写

3、内置过滤器——json过滤器

        json过滤器输出表达式经过JSON.stringfy()处理后的结果。json可接受一个类型为Number的参数，用于决定转换后的JSON字符串的缩进距离，如果不输入该参数，则默认为2。如：<pre>{{didiFamily | json 4}}</pre>  //以4个空格的缩进打印一个对象

4、内置过滤器——限制

        Vue.js中内置了limitBy、filterBy、orderBy三个过滤器用于处理并返回过滤后的数组。

注意：这三个过滤器所处理的表达式的值必须是数组，否则程序会报错。

（1）limitBy

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

<!--只显示开始的10个元素-->
<div v-for="item in items | limitBy 10"></div>

<!--显示第5到15个元素-->
<div v-for="item in items | limitBy 10 5"></div>

（2）filterBy

        filterBy过滤器的使用比较灵活，第一个参数可以是字符串或者函数。

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

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

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

        <div v-for="member in didiFamily | filterBy 'ddfe' in 'name'"></div>  //过滤器只在用户对象的name属性中搜索ddfe。

        也可以在多个字段中进行搜索，字段与字段间以空格分隔。如：

        <li v-for="user in users | filterBy 'Chris' in 'name' 'nickname'"></li>

        可以将搜索字段存放在一个数组中。如：

<!--fields = ['A','B']-->
<div v-for="user in users | filterBy searchText in fields"></div>

        可以使用动态参数作为搜索目标或搜索字段。结合v-model实现，如：

<div id="id">
    <input v-model="name">
    <ul>
        <li v-for="user in users | filterBy name in 'name'">
            {{user.name}}
        </li>
    </ul>
</div>

new Vue({
        el:"#id",
        data:{
            name:'',
            users:[
                {name:'wansg'},
                {name:'dfdf'},
                {name:'hgyhg'}
            ]
        }
    })

        如果filterBy的第一个参数是函数，则过滤器将根据函数的返回结果进行过滤。此时filterBy过滤器将调用JS数组中内置的函数filter()对数组进行处理，待过滤数组中的每个元素都作为参数输入并执行传入filterBy中的函数。只有函数返回结果为true的数组元素才符合条件并将存入一个新的数组，最终返回结果即为这个新的数组。

（3）orderBy

       orderBy过滤器的作用是返回排序后的数组。第一个参数可以是字符串、数组或函数。第二个参数order可选，决定结果为升序或降序排列，默认为1，即为升序排列。

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

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

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

      也可以将排序键名按照顺序放入一个数组中，然后传入一个数组参数给orderBy过滤器即可。如：

<!--sortKey = ['lastName','firstName','age']-->
<ul>
    <li v-for="user in users | orderBy sortKey">
        {{user.lastName}} {{user.firstName}} {{user.age}}
    </li>
</ul>

       当传入第一个参数为函数时，orderBy过滤器与JS数组中内置的sort()函数表现一致。

5、currency过滤器

        currency过滤器的作用是将数字值转换为货币形式输出。

       第一个参数接受类型为String的货币符号，如果不输入，则默认为美元符号$。

       第二个参数接受类型为Number的小数位，如果不输入，则默认为2.

注意：如果第一个参数采取默认形式，而需要第二个参数修改小数位，则第一个参数不可省略。如：

    {{amount | currency}}  //12345 => $12,345.00    //美元
    {{amount | currency '£'}} //12345 => £12,345.00   //英镑
    {{amount | currency '$' 3}} //12345 => $12,345.000

6、debounce过滤器

        debounce过滤器的作用是延迟处理器一定的时间执行。其接受的表达式的值必须为函数，因此一般与v-on等指令一起使用。

        debounce接受一个可选的参数作为延迟时间，单位为毫秒。如果没有该参数，则默认的延迟时间为300毫秒。

        经过debounce包装的处理器在调用之后将至少延迟设定的时间再执行。如果在延迟结束前再次调用，则延迟时长将重置为设定的时间。

        通常，在监听用户input事件时使用debounce过滤器比较有用，可以防止频繁调用方法。debounce的用法参考如下：

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

7、自定义过滤器

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

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

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

（1）单个参数

如：注册一个名为reverse的过滤器，作用是将字符串反转输出。

Vue.filter('reverse',function (value) {
        return value.split('').reverse().join('');
    })

<!--'abc' => 'cba'-->
<span v-text="message | reverse"></span>

（2）多参数

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

Vue.filter('wrap',function (value,begin,end) {
        return begin + value + end
    })

<!-- 'hello' => 'before hello after' -->
<span v-text="message |wrap 'before' 'after'"></span>

（3）双向过滤——Model数据输出到View层之前进行数据转换；

                              把来自视图（input元素）的值在写回模型前进行转化。

如：

Vue.filter(id,{
        //model -> view
        //read函数可选
        read:function (val){},

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

（4）动态参数

        如果过滤器的参数没有用引号包起来，则它会在当前vm作用域内动态计算。此外，过滤器函数的this始终指向调用它的vm。如：

<input v-model="userInput">
<span>{{msg | concat userInput}}</span>

new Vue({
        el:"#id",
        data:{
            name:'',
            users:[
                {name:'wansg'},
                {name:'dfdf'},
                {name:'hgyhg'}
            ]
        }
    })

注意：

• 需要给定过滤器一个唯一的标识。如果用户自定义的过滤器与Vue.js内置的过滤器冲突，那么Vue.js内置的过滤器将会被覆盖；如果后注册的过滤器和之前的过滤器冲突，则之前注册的过滤器层被覆盖。
• 过滤器函数的作用是输入表达式的值，经过处理后输出。因此，定义的函数最好可以返回有意义的值。函数没有return语句不会报错，但这样的过滤器没有意义。