vue中将时间戳转换为YYYY-MM-dd hh:mm格式时间的方法
微wx笑
2022-04-04【前端开发】
112
5
0关键字：
vue 时间戳转换 php
后台程序为PHP+MySQL，存储在数据库中的是时间戳，前台用vue展示的时候就需要做一个转换，这里使用vue的filtersr技术。
目录
后台程序为PHP+MySQL，存储在数据库中的是时间戳，前台用vue展示的时候就需要做一个转换，这里使用vue的filtersr技术。
相关view代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 | <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> |
关键的就是：
1 2 3 4 5 6 | <el-table-column label="下单时间"> <template slot-scope="scope"> {{ scope.row.order_time | formatDateTime }} </template> </el-table-column> |
用一个“|”管道符号指定格式化函数/方法
相关js代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 | <!-- 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: '' } } } } }); |
主要代码就是
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | 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样式划一个半圆
