vue中将时间戳转换为YYYY-MM-dd hh:mm格式时间的方法
微wx笑
2022-04-04【前端开发】
5
0关键字：
vue 时间戳转换 php
后台程序为PHP+MySQL，存储在数据库中的是时间戳，前台用vue展示的时候就需要做一个转换，这里使用vue的filtersr技术。
后台程序为PHP+MySQL，存储在数据库中的是时间戳，前台用vue展示的时候就需要做一个转换，这里使用vue的filtersr技术。
相关view代码:
<el-table
:data="tableData"
stripe
border
style="width: 100%"
size="mini"
:header-cell-style="{background:'#70b6ff',color:'#FFF',fontSize:'16px'}"
:cell-style="cellStyle">
<el-table-column
label="名次" width="60px">
<template slot-scope="scope">
<p v-html="scope.row.rank"></p>
</template>
</el-table-column>
<el-table-column
prop="name"
label="参赛人员" width="90px">
</el-table-column>
<el-table-column
prop="group"
label="所在群" width="70px">
</el-table-column>
<el-table-column
prop="week_total"
label="周总成绩" width="90px">
</el-table-column>
<el-table-column
label="自选股">
<template slot-scope="scope">
<p v-html="scope.row.my_stock"></p>
</template>
</el-table-column>
<el-table-column
prop="my_last_close"
label="上周五收盘价">
</el-table-column>
<el-table-column
prop="my_high"
label="本周最高价">
</el-table-column>
<el-table-column
prop="my_increase"
label="周最高涨幅">
</el-table-column>
<el-table-column
prop="work_stock"
label="作业股">
<template slot-scope="scope">
<p v-html="scope.row.work_stock"></p>
</template>
</el-table-column>
<el-table-column
prop="work_author"
label="作业股组长">
</el-table-column>
<el-table-column
prop="work_last_close"
label="上周五收盘价">
</el-table-column>
<el-table-column
prop="work_high"
label="本周最高价">
</el-table-column>
<el-table-column
prop="work_increase"
label="周最高涨幅">
</el-table-column>
<el-table-column
label="下单时间">
<template slot-scope="scope">
{{ scope.row.order_time | formatDateTime }}
</template>
</el-table-column>
<el-table-column
prop="month"
label="所属月份">
</el-table-column>
</el-table>关键的就是：
<el-table-column
label="下单时间">
<template slot-scope="scope">
{{ scope.row.order_time | formatDateTime }}
</template>
</el-table-column>用一个“|”管道符号指定格式化函数/方法
相关js代码
<!-- import Vue before Element -->
<script src="/eleui/vue.js"></script>
<!-- import JavaScript -->
<script src="/eleui/index.js"></script>
<script>
new Vue({
el: '#app',
data: function() {
return {
tableData: [],
groupVisible: false,
options: [],
options_author: [],
value: [],
list: [],
loading: false,
}
},
mounted() {
this.tableData = orderlist.map((item,idx) => {
return {
rank: idx+1 < 4 ? "<img src='img/rank" + (idx+1) + ".png' />" : idx+1,
cycle: `${item[0]}`,
name: `${item[1]}`,
my_stock: `${item[2].replace(" ", "<br>")}`,
work_author: `${authorList[item[3]]}`,
work_stock: `${item[4].replace(" ", "<br>")}`,
my_last_close: `${item[5]}`,
my_high: `${item[6]}`,
work_last_close: `${item[7]}`,
work_high: `${item[8]}`,
my_increase:`${item[9]}%`,
work_increase:`${item[10]}%`,
week_total:`${item[11]}%`,
group: `${item[12]}`,
order_time:`${item[13]}`,
month:`${item[14]}`
};
});
},
filters: {
//## yyyy-MM-dd HH：mm：ss
formatDateTime(value) { // 时间戳转换日期格式方法
if (value == null) {
return '';
} else {
const date = new Date(parseInt(value)*1000);
const y = date.getFullYear(); // 年
let MM = date.getMonth() + 1; // 月
MM = MM < 10 ? ('0' + MM) : MM;
let d = date.getDate(); // 日
d = d < 10 ? ('0' + d) : d;
let h = date.getHours(); // 时
h = h < 10 ? ('0' + h) : h;
let m = date.getMinutes();// 分
m = m < 10 ? ('0' + m) : m;
let s = date.getSeconds();// 秒
s = s < 10 ? ('0' + s) : s;
return y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s;
}
}
},
methods: {
getWeekHigh:function(close,high){
if (!isNaN(close) && !isNaN(high) && close.length > 0 && high.length){
var zf = (parseFloat(high) / parseFloat(close)) * 100 - 100;
return zf.toFixed(2) + "%";
}else{
return "0%";
}
},
cellStyle:function({row, column, rowIndex, columnIndex}){
console.log(row,column,rowIndex,columnIndex);
//console.log(row[columnIndex]);
if ((columnIndex == 7 && row.my_increase == '0.00%') || (columnIndex == 12 && row.work_increase == '0.00%')) {
return {
background: '#70AD49',
color:'#FFF'
}
}else{
return {
background: ''
}
}
}
}
});主要代码就是
filters: {
//## yyyy-MM-dd HH：mm：ss
formatDateTime(value) { // 时间戳转换日期格式方法
if (value == null) {
return '';
} else {
const date = new Date(parseInt(value)*1000);
const y = date.getFullYear(); // 年
let MM = date.getMonth() + 1; // 月
MM = MM < 10 ? ('0' + MM) : MM;
let d = date.getDate(); // 日
d = d < 10 ? ('0' + d) : d;
let h = date.getHours(); // 时
h = h < 10 ? ('0' + h) : h;
let m = date.getMinutes();// 分
m = m < 10 ? ('0' + m) : m;
let s = date.getSeconds();// 秒
s = s < 10 ? ('0' + s) : s;
return y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s;
}
}
},注意：
1、很多人在使用vue的时候就是整个项目一个页面（一个文件），用户不管怎么点击页面中的链接、按钮就是在一个页面中切换，而我的使用方式是一个页面（一个文件）就是一个功能的实现，会进行实际url地址的跳转。
这样表述不知道够不够清楚？
2、php的时间戳与js的时间戳想差一千，php是秒级别的，js精确到毫秒级别。
本文由 微wx笑 创作，采用 署名-非商业性使用-相同方式共享 4.0 许可协议，转载请附上原文出处链接及本声明。
原文链接：https://www.ivu4e.cn/blog/front/2022-04-04/1141.html
上一篇：使用CSS样式划一个半圆
