Vue 使用三种方式写过滤器

「喜欢是和优点谈恋爱，那么爱就是和缺点过日子啦」

@[TOC]

1.全局过滤器

这里是一个全局过滤器，可以在全局调用，其中参数value可以收取到属性得到的值然后通过slice（0,4）获取前四位，下面讲解分别使用计算属性 监测属性 fliters局部过滤器实现。

Vue.filter('mySlice',function(value){
        return value.slice(0,4)
    })

2.计算属性实现

（1）先创建一个容器，这里我们需要写入过滤器的名来调用过滤器

<div id="root">
 	<h3>现在是:{{fmtTime | mySlice}}</h3>
</div>

（2）这里我们输出现在的时间，然后使用过滤器得到我们想要的结果。
其中 time 这里是一个时间戳。
dayjs 我们是导入到外部库来实现解析时间戳返回一个时间，可以再 Boot CDN 中安装，有兴趣的的可以交接一下，链接在这里：https://www.bootcdn.cn/dayjs/

new Vue({
        el:'#root',
        data:{
            time:'1639377273144' //时间戳
        },
        computed:{
            fmtTime(){
                return dayjs(this.time).format("YYYY年MM月DD日 HH:mm:ss")
            }
        }
    })

3.监测属性实现

（1）这里容器的创建方法和上面一样就不在一一讲解，但是要注意函数名字以及过滤器名。
（2）以下代码我们可以看到大差不差，只是我们使用了不同的方式实现相同的效果。

methods: {
            getFmtTime(){
                return dayjs(this.time).format("YYYY年MM月DD日 HH:mm:ss")
            }
        }

4.filters 局部过滤器

filters:{
            timeFormater(value,str="YYYY年MM月DD日 HH:mm:ss"){
                return dayjs(value).format(str)
            },
            mySlice(value){
                return value.slice(0,4)
            }
        }

我们在内部创建一个过滤器（mySlice），逻辑也是一样，利用slice 属性获取前四位。

解决的过滤器的三种实现方法，让我们来做一个总结：

过滤器：    
        定义：对要显示的数据进行特定格式化后在显示（适用于一些简单的逻辑）
        语法：
            1.注册过滤器：Vue.fliter(name | callbak) 或 new Vue(fliters:{})
            2.使用过滤器：{{xxx | 过滤器名} 或 v-bind：属性='xxx | 过滤器名字'}

        备注：
            1.过滤器也可以接收额外参数，多个过滤器也可以串联
            2.并没有改变原本的数据，是产生新的对应数据