vue 时间格式化

电玩女神 2021-10-18 20:22 468阅读 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 : []
    		}
    	});

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

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

希望对你有所帮助

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70]: /images/20211018/6f8c7037045949ac840aa15b4159e672.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 1]: /images/20211018/b06aa8ad70cc45cc83ea793e57ba8ee0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhdG91bmlhbzE_size_16_color_FFFFFF_t_70 2]: /images/20211018/6b770acc7c91446481949a26505dd0f3.png

发表评论取消回复

表情：

评论列表（有 0 条评论，468人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue时间格式化例子

vue格式化时间解决方法： 1.package.json文件添加依赖： "moment": "^2.14.1", 2.组件中引用 import mom

待我称王封你为后i/ 2023年01月03日 04:10/ 0 赞/ 153 阅读

相关 vue使用moment格式化时间

第一、安装moment npm install moment --save 第二、在main.js引入moment，并且设一个全局的过滤器 imp

「爱情、让人受尽委屈。」/ 2022年12月03日 13:08/ 0 赞/ 211 阅读

相关 Vue.js —— 时间格式化

> 项目中经常遇到这样的场景，后端在接口中返回的时间信息是时间戳，需要前端处理好再展示。需要用到moment包，先安装好，引入。 <script>

浅浅的花香味﹌/ 2022年11月29日 12:16/ 0 赞/ 244 阅读

相关 vue格式化时间戳

js： var articleContent = new Vue({ el: "articleContent", da

朱雀/ 2022年05月23日 11:53/ 0 赞/ 289 阅读

相关时间格式化与json时间格式化

1、后台传递数组到前端，前端通过EL表达式显示数据，若传递的有时间类型的数据，前端页面显示的时间是带英文的时间格式，为方便查看，需要转化为类似 2018-07-08 12:01

我就是我/ 2022年05月14日 06:21/ 0 赞/ 289 阅读

相关 vue时间格式化

1 安装 ![20181114141756361.png][] 2.全局引入 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10

╰+哭是因爲堅強的太久メ/ 2022年04月17日 06:58/ 0 赞/ 263 阅读

相关 Vue时间格式化

format.js export const formatDateTime = (date, fmt) => { if (!date) {

素颜马尾好姑娘i/ 2022年03月27日 03:23/ 0 赞/ 314 阅读

相关 vue 时间格式化

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

电玩女神/ 2021年10月18日 20:22/ 0 赞/ 469 阅读

相关 vue格式化时间

效果图 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLm

朴灿烈づ我的快乐病毒、/ 2021年09月09日 02:00/ 0 赞/ 506 阅读

相关 vue中使用moment格式化时间

目录一、安装moment.js 二、main.js中引入moment 三、使用 1、过滤器用法全局过滤器局部过滤器 2、挂载vue上 ----------

梦里梦外;/ 2021年09月07日 15:08/ 0 赞/ 652 阅读