«

Vue全局日期时间过滤器实现代码分享

时间:2023-6-7 13:11     作者:六思逸     分类: Vue


最近正好在练习写小项目,用到了日期时间过滤器,在Vue中直接将过滤器写在全局(全局过滤器)任何组件都可以使用还是非常的方便,我总共写了三个过滤器,将代码分享给大家,如果还有其他的方案或者建议,可以在评论区进行探讨.

一、全局日期过滤器

显示格式 2023/06/07

Vue.filter("formater", (d) => {
    let d1 = new Date(d);
    return (
        d1.getFullYear() + "/" + (d1.getMilliseconds() + 1) + "/" + d1.getDate()
    );
});

二 、全局时间过滤器

显示格式 13:14:52

Vue.filter("formtime", (d) => {
    let d1 = new Date(d);
    return d1.getHours() + ":" + d1.getMinutes() + ":" + d1.getSeconds();
});

三、全局日期时间过滤器

显示格式 2023-06-07 13:14:52

Vue.filter("datetime", (d) => {
    let d1 = new Date(d);
    let year = d1.getFullYear();
    let month = ("0" + (d1.getMonth() + 1)).slice(-2);
    let day = ("0" + d1.getDate()).slice(-2);
    let hour = ("0" + d1.getHours()).slice(-2);
    let minute = ("0" + d1.getMinutes()).slice(-2);
    let second = ("0" + d1.getSeconds()).slice(-2);

    return (
        year + "-" + month + "-" + day + " " + hour + ":" + minute + ":" + second
    );
});

标签: Vue 过滤器 全局过滤器 日期 时间

版权所有:六思逸
文章标题:Vue全局日期时间过滤器实现代码分享
除非注明,文章均为 六思逸 原创,转载请注明作者和出处 六思逸

扫描二维码,在手机上阅读

推荐阅读: