Vue2(笔记15) - Vue核心 - 过滤器

可学可不学，可用可不用

过滤器

需求：把一个时间戳格式化成可读的年月日时间；

需要引入一个 dayjs 的 JS库，专门用来处理时间的；​​dayjs在这可以下载​​

<script src="./res/vue.js"></script>
<script src="./res/dayjs.min.js"></script>

提示：首先得引入 vue.js  和 dayjs 库（用来处理时间的JS库，有兴趣可以了解下）；

<div id="root">
    <h2>显示格式化后的日期</h2>
    <h3>时间戳：{{time}}</h3>
    <!-- 计算属性实现 -->
    <h3>日期：{{fmtTime}}</h3>
    <!-- methods 实现 -->
    <h3>日期：{{getFmtTime()}}</h3>
    <!-- 过滤器实现 -->
    <h3>日期：{{time | timeFormater}}</h3>
    <!-- 过滤器实现(传参) -->
    <h3>日期：{{time | timeFormater('YYYY_MM_DD') }}</h3>
    <!-- 过滤器实现(串联) -->
    <h3>日期：{{time | timeFormater('YYYY_MM_DD') | timeSlice}}</h3>
    <!-- 应用全局过滤器 -->
    <h3>欢迎词：{{msg | mySlice}}</h3>
</div>

提示1：计算属性实现 和methods 实现都比较简单，methods 可以在插值语法中加上括号来执行；

提示2：过滤器需要 引入 全新的配置对象 ​​filters:{}​​​，过滤器方法函数写在里面，在插值语法中使用 “​​|​​” 管道的方式（有点像 linux 的管道），在后面写上过滤器的名；

提示3：过滤器可以传参，可复用，可串联；

提示4：过滤器，还有局部和全局过滤器之分，用法简单，不难区分；

// 全局过滤器
Vue.filter('mySlice',function(value){
    return value.slice(0,5)
})

new Vue({
    el:'#root',
    data:{
        time:1670069799153,
        msg:'hello Vue'
    },
    computed:{
        fmtTime(){
            return dayjs(this.time).format('YYYY-MM-DD HH:mm:ss');
        }
    },
    methods: {
        getFmtTime(){
            return dayjs(this.time).format('YYYY/MM/DD HH:mm:ss');
        }
    },
    // 局部过滤器
    filters:{
        timeFormater(value,str='YYYY年MM月DD日 HH:mm:ss'){
            return dayjs(value).format(str)
        },
        timeSlice(value){
            return value.slice(0,4)
        }
    }
})

提示1：先看全局过滤器，定义在 Vue.filter() 方法上，回调函数就是处理过滤的方法，一般在插值语法中使用；

提示2：局部过滤器都写在 ​​filters:{}​​ 这个配置对象里面，接受传参，可写多个；

看下效果：一个时间戳，用计算属性、methods 和三种过滤器的方式来实现，最后演示了一下全局过滤器；

【过滤器】总结：

定义：对要显示的数据进行特定格式化后再显示，(适用于一些简单逻辑的处理)。

语法：

1）注册过滤器： Vue.filter(name,callback) 或 new Vue({filters:{}})

2）使用过滤器：{{ xxx | 过滤器名 }} 或 v-bind:属性 = " xxx | 过滤器名"

备注：

1）过滤器也可以接收额外参数、多个过滤器也可以串联；

2）并没有改变原本的数据，是产生新的对应的数据；

感觉并不像老师说的，可用可不用，有些情况可能还是挺有用的；