Vue-过滤器

一、定义

过滤器：对要显示的数据进行特定格式化后再显示（用于一些简单的逻辑处理，例如可以将日期格式改为正常格式）

二、语法

1.注册过滤器

过滤器本质上是一个局部过滤器，一个vm实例只能用它自己注册的过滤器，其它的vm实例并不能用，但是可以注册全局过滤器供所有的vm实例使用，所以就分为全局过滤器和局部过滤器

1. 全局过滤器：Vue.filter(name,callback)
2. 局部过滤器：new Vue({filters:{}})

2.使用过滤器

1. {{xxx | 过滤器名}}
2. v-bind:属性 = ” xxx | 过滤器名“

 三、过滤器实现日期格式举例

首先我们引入Day.js（Day.js 是一个轻量的处理时间和日期的 JavaScript 库https://cdn.bootcdn.net/ajax/libs/dayjs/1.11.9/dayjs.min.js）

运用管道方法实现过滤器，如下图所示，过滤器名为timeFormater，属性名字是time表示当前时间的时间戳，其实过滤器名的名字timeFormater实质上就是一个函数，而time就是这个函数的参数

在vm之中写下包裹过滤器的容器filters

val实质上就是上面的传过来的参数time,接着运用dayjs的语法dayjs(值).format('YYYY年MM月DD日 HH：MM:ss)'对时间戳进行标准化，将返回值返回给timeFormater，重新解析模板，替换插值语法中的内容

或者在外部写一个全局过滤器也可以实现

效果

四、过滤器的串联

过滤器也可以接收额外参数，多个过滤器也可以串联，

例如：下面的timeFormater具有两个参数，而且和Myslice过滤器是串联关系，当timeFormater过滤器返回值后，将返回的值作为参数传给Myslice函数

效果

五、过滤器注意点

1. 要定义到filter节点上，本质是一个函数
2. 在过滤器函数中，一定要有return值
3. 在过滤器的形参中，就可以获取到管道符前面待处理的那个值
4. 如果全局过滤器和局部过滤器名字一致，按照“就近原则”调用的是局部过滤器