vue 时间格式化-蒲公英云

vue 时间格式化

电玩女神 2021-10-18 20:22 581阅读 0赞

前段时间利用vue实现数据在页面上的显示，我本人比较喜欢用谷歌浏览器，但是测试就是不用，用的360 ，说我页面上显示的时候时间存在问题

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70

这个是在360 浏览器上显示出来的

看样子时间确实有点问题

我的代码是这样的：

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 1

这个是利用vue的前台

我们来看jsdateformat的定义:

var vu = new Vue({
        el : '.table',
        methods : {
            dateFormat : function(time) {
                var date = new Date(time);
                var year = date.getFullYear();
                var month = date.getMonth() + 1 < 10 ? "0"
                        + (date.getMonth() + 1) : date.getMonth() + 1;
                var day = date.getDate() < 10 ? "0" + date.getDate() : date
                        .getDate();
                var hours = date.getHours() < 10 ? "0" + date.getHours() : date
                        .getHours();
                var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes()
                        : date.getMinutes();
                var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds()
                        : date.getSeconds();
                return year + "-" + month + "-" + day + " " + hours + ":"
                        + minutes + ":" + seconds;
            }
        },
        data : {
            data : []
        }
    });

利用这个方法在谷歌浏览器上显示真的是正常的

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 2

为什么会是这个样子

原来我们在后台返回的是从数据库中取出来的时间 util.Date 这种类型，但是谷歌浏览器的时间会转换为时间戳的形式比如：16567777362632 形式

但是IE浏览器时间会格式是:2019-08-01T09:13:40.000+0000

这样也就是谷歌和IE我们后台返回的日期格式，前台要注意区分浏览器

所以:

var vu = new Vue({
        el : '.table',
        methods : {
            dateFormat : function(time) {
                if (!!window.ActiveXObject || "ActiveXObject" in window) {
                    var arr = time.split("T");
                    var d = arr[0];
                    var darr = d.split('-');
                    var t = arr[1];
                    var tarr = t.split('.000');
                    var marr = tarr[0].split(':');
                    time = parseInt(darr[0]) + "/" + parseInt(darr[1]) + "/"
                            + parseInt(darr[2]) + " " + parseInt(marr[0]) + ":"
                            + parseInt(marr[1]) + ":" + parseInt(marr[2]);
                }
                var date = new Date(time);
                var year = date.getFullYear();
                var month = date.getMonth() + 1 < 10 ? "0"
                        + (date.getMonth() + 1) : date.getMonth() + 1;
                var day = date.getDate() < 10 ? "0" + date.getDate() : date
                        .getDate();
                var hours = date.getHours() < 10 ? "0" + date.getHours() : date
                        .getHours();
                var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes()
                        : date.getMinutes();
                var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds()
                        : date.getSeconds();
                return year + "-" + month + "-" + day + " " + hours + ":"
                        + minutes + ":" + seconds;
            }
        },
        data : {
            data : []
        }
    });