Vue 时间戳转换成日期格式

全栈程序员-站长 • 2026年3月26日下午5:14 • 未分类 • 阅读 2

初学者用了element 的Vue框架,搭建了一个简单后台管理系统,遇到了数据库是时间戳的格式,数据在前端页面显示也是时间戳,开始的时候是在Java代码里将时间戳转换成日期格式的,发现这样转换有时候如果数据库里的数据为空会报空指针错误,前端同事给了我一个方案,就是在前端代码里将时间戳转换成日期格式,觉得效果挺好的,下面分享一下使用转换的过程:

1. 在前端项目的util包下新建一个common.js,添加如下代码:

// 时间戳转换成日期格式 export function getDate(val, format) { if (!val) { return ''; } // 如果时间戳后不是毫秒值就加000,变成毫秒值 // if (val && val.length == 10) { val = parseInt(val+'000'); } if (val && val.length != 13) { if (val && val.length == 10) { val = parseInt(val+'000'); }; for (var i = 0; i < 13; i++) { if (val.length === i) { val = parseInt(val*(10^(13-i))); } } } var date = new Date(val); var o = { "M+" : date.getMonth()+1, //月份 "d+" : date.getDate(), //日 "h+" : date.getHours(), //小时 "m+" : date.getMinutes(), //分 "s+" : date.getSeconds(), //秒 "q+" : Math.floor((date.getMonth()+3)/3), //季度 "S" : date.getMilliseconds() //毫秒 }; if(/(y+)/.test(format)) { format = format.replace(RegExp.$1, (date.getFullYear()+"").substr(4 - RegExp.$1.length)); } for(var k in o) { if(new RegExp("("+ k +")").test(format)) { format = format.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length))); } } return format; }

2. 再到所需的 .vue 的页面中引入common.js 的 getDate 方法

3. 然后在你获取列表的方法里循环输出你所需的时间字段

methods: { getList: function() { let params = { pageNumber: this.page.pageNumber, pageSize: this.page.pageSize }; list(params) .then(res => { const paramData = res.data; const success = paramData.success; this.tableData = paramData.data.list; this.page.pageNumber = paramData.data.pageNum; this.page.pageSize = paramData.data.pageSize; this.page.total = paramData.data.total; for(var i = 0; i < this.tableData.length ; i++){ // 调用 getDate 方法 this.tableData[i].createTime = getDate(this.tableData[i].createTime,'yyyy-MM-dd hh:mm:ss'); this.tableData[i].updateTime = getDate(this.tableData[i].updateTime,'yyyy-MM-dd hh:mm:ss'); // toFixed(Number) 方法可把 Number 四舍五入为指定小数位数的数字(将整型转化有两位小数的浮点型数字) this.tableData[i].amount = this.tableData[i].amount.toFixed(2); // 将string类型的转换成带有两位小数点的数字 this.tableData[i].platform = Number(this.tableData[i].platform).toFixed(2); } }) .catch(error => { this.$message.error(error); console.log(error); }); } }

最后,你就能看到你想要的时间格式了.

发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/178468.html原文链接：https://javaforall.net