vue 时间格式化

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

vue 时间格式化_第1张图片

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

看样子时间确实有点问题

我的代码是这样的:

vue 时间格式化_第2张图片

这个是利用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 : []
		}
	});

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

vue 时间格式化_第3张图片

为什么会是这个样子

原来我们在后台返回的是从数据库中取出来的时间 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 : []
		}
	});

dataFormat上面我添加一个判断,如果是IE浏览器我先把时间转换为时间戳的形式

这样360上面时间显示就正常了

希望对你有所帮助

 

你可能感兴趣的:(javaScript)