前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >20. Vue 过滤器 - 转化时间格式

20. Vue 过滤器 - 转化时间格式

作者头像
Devops海洋的渔夫
发布2020-03-19 17:22:59
1.5K0
发布2020-03-19 17:22:59
举报
文章被收录于专栏:Devops专栏

需求

在上一篇中基本讲诉了Vue过滤器的基本使用,那么在后台管理系统的业务中,使用最多的一个过滤器就是时间格式的转化,下面来看看,如何处理。

构建示例

代码语言:javascript
复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--  1.导入vue.js库  -->
    <script src="lib/vue.js"></script>

</head>
<body>

<div id="app">

    <!--  定义一个时间字符串的显示  -->
    <p> 时间:{{ ctimeStr }} </p>

    <!--  使用过滤器显示时间  -->
    <p> 格式化时间:{{ ctimeStr | formatCtime }} </p>

</div>

<script>

    // 2. 创建一个Vue的实例
    var vm = new Vue({
        el: '#app',
        data: {
            ctimeStr: new Date(), // 定义显示时间
        },
        methods: {},
        filters:{ // 定义局部过滤器

            // 格式化时间
            formatCtime(dateStr){
                return dateStr
            }

        }
    });


</script>

</body>
</html>

页面显示如下:

格式化年月日

代码语言:javascript
复制
formatCtime(dateStr){
        // 格式化dateStr时间
        var dt = new Date(dateStr);

        // 获取年
        var year = dt.getFullYear();

        // 获取月
        var month = dt.getMonth() + 1; // 月份 0 - 11,需要 + 1

        // 获取日
        var day = dt.getDate();

        // 拼接 yyyy-mm-dd
        return year + '-' + month + '-' + day
}

下面来看看格式化效果,如下:

模板字符串优化字符串拼接

可以看到已经格式化好了年月日了,下一步就是格式化时分秒,但是上面有一个可以优化的地方。

代码语言:javascript
复制
return year + '-' + month + '-' + day

这里的字符串拼接可以使用模板字符串的方式进行修改,增强语义,如下:

代码语言:javascript
复制
return `${year}-${month}-${day}` // 模板字符串

设置格式化参数

在时间格式化的常见示例中:

  • 格式化年月日 yyyy-mm-dd
  • 格式化年月日时分秒 yyyy-mm-dd hh:mm:ss

那么上面应该要有这两个参数的传入,来控制到底需要显示为什么格式。

在过滤器中设置传入的格式化参数,如下:

格式化时分秒

上面已经完成可以格式化两种时间格式,下面来完善时分秒的格式化,如下:

代码语言:javascript
复制
        filters:{ // 定义局部过滤器

            formatCtime(dateStr, pattern = ""){
                    // 格式化dateStr时间
                    var dt = new Date(dateStr);

                    // 获取年
                    var year = dt.getFullYear();

                    // 获取月
                    var month = dt.getMonth() + 1; // 月份 0 - 11,需要 + 1

                    // 获取日
                    var day = dt.getDate();

                    // 判断格式化是 yyyy-mm-dd 还是 yyyy-mm-dd hh:mm:ss
                    if (pattern.toLowerCase() === "yyyy-mm-dd"){

                        // 拼接 yyyy-mm-dd
                        // return year + '-' + month + '-' + day
                        return `${year}-${month}-${day}` // 返回yyyy-mm-dd格式化时间

                    } else{

                        // 获取小时
                        var hours = dt.getHours();

                        // 获取分钟数
                        var minutes = dt.getMinutes();

                        // 获取秒数
                        var secounds = dt.getSeconds();

                        // 返回 yyyy-mm-dd hh:mm:ss 格式化时间
                        return `${year}-${month}-${day} ${hours}:${minutes}:${secounds}`
                    }


            }

        }

浏览器显示格式化的时间如下:

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 需求
  • 构建示例
    • 格式化年月日
      • 模板字符串优化字符串拼接
        • 设置格式化参数
          • 格式化时分秒
          领券
          问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档