Vue.js 自定义过滤器

过滤器，本质上就是一个函数。其作用在于用户输入数据后，它能够进行处理，并返回一个数据结果。

Vue.js 与 AngularJS 中的过滤器语法有些相似，使用管道符（|）进行连接，代码示例如下：

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

这里使用了Vue.js 内置的过滤器 uppercase，将字符串中的字母全部转换成大写形式。

Vue.js 支持在任何出现表达式的地方添加过滤器，除了上面例子中的 双大括号 表达式之外，还可以在绑定指令的表达式后调用，代码示例如下：

渲染为： =>  HELLO WORLD!

Vue 2.x 中，过滤器只能在 mustache 绑定中使用。为了在指令绑定中实现同样的行为，你应该使用计算属性。

过滤器可以串联：

{{ message | filterA | filterB }}

这里可以看一个例子：

    
{{'ABCDE' |lowercase | capitalize }}

lowercase 过滤器：把数据变成小写形式

capitalize过滤器：把首字母变成大写形式

// 'ABCDE' -> 'abcde' -> 'Abcde'

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

{{ message | filterA('arg1', arg2) }}

过滤器函数将始终以表达式的值作为第一个参数，带引号的参数会被当作字符串处理，而不带引号的参数会被当作数据属性名来处理。

这里的 message 将作为第一个参数，字符串arg1 作为第二个参数，表达式 arg2 的值在计算出来以后作为第三个参数传给过滤器。同时，Vue.js 的过滤器支持链式调用，上一个过滤器的输出结果可以作为下一个过滤器的输入

内置过滤器

必须指出的是，在Vue2.0中，删除了所有的内置过滤器

1、字母操作

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

1-1、capitalize

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

{{'abc' | capitalize}}  // 'abc' => 'Abc'

1-2、uppercase

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

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

1-3、lowercase

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

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

2、限制

Vue.js 中内置了 limitBy、filterBy、orderBy 三个过滤器用于处理并返回过滤后的数组，比如与v-for搭配使用。

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

2-1、limitBy

limitBy 过滤器的作用是限制数组为开始前的 N 个元素，其中，N 由传入的第一个参数指定，表示限制几个，默认为 0， 即取全部的元素。第二个参数可选，用于指定从哪开始，比如：第一个参数是4，第二个参数是5，则表示取4个元素，从下标为5的元素开始。代码示例如下：

    

        
        `item`
    

    

        
        `item`
    

    

        
        `item`