vue的过滤器

过滤器（Filters）是vue为开发者提供的功能，常用于文本的格式化。过滤器可以用在两个地方：插值表达式和v-bind属性绑定。

过滤器应该被添加在JavaScript表达式的尾部，由“管道符”进行调用，示例代码如下：

 

 

 过滤器的注意点：

　　1.要定义到filters节点下，本质上是一个函数

　　2.在过滤器函数中，一定要有return值

　　3.在过滤器的形参中，就可以获取到管道符前面带出来的值

　　4.如果全局过滤器和私有过滤器名字一致，此时按照“就近原则”调用的是“私有过滤器”

 

私有过滤器和全局过滤器

在filters节点下定义的过滤器，称为’私有过滤器‘，因为它只能在当前vm实例所控制的el区域使用。

如果希望在多个vue实例之间共享过滤器，则可以安装如下的格式定义全局过滤器：

    <script>
        //声明格式化时间的全局过滤器
        Vue.filter('dateFormat',function(time){
            //1对time进行格式化处理,得到YYYY-MM-DD HH:mm:ss格式的时间
            const dtStr = dayjs(time).format("YYYY-MM-DD HH:mm:ss")
            //2.把格式化后的时间return出去
            return dtStr
        })
        
    </script>

2.3连续调用多个过滤器

过滤器可以串联地进行调用，例如：

 

2.4过滤器传参

过滤器的本质是JavaScript函数，因此可以接收参数，格式如下：

<p>{{message | filter(arg1,arg2)}}</p>

//过滤器处理函数的形参列表中
// 第一个参数，永远都是"管道符“前面待处理的值
//第二个参数开始，才是调用过滤器时传递过来的arg1和arg2参数
Vue.filter('filterA',(msg,arg1,arg2) =>{
    //过滤器的代码逻辑
}）