服务端存储的时间格式，一般为 Unix 时间戳，比如 2019/1/6 13:40:1 的Unix 时间戳为 1546753201651。前端在获取到这个时间戳之后，会转换为可读格式的时间。在社交类产品中，一般会将时间戳转换为 x 分钟前，x 小时前或者 x 天前，因为这样的显示方式用户体验更好。
我们可以自定义一个 v-relative-time 指令来实现上述功能。
html：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> </style> </head> <body> <div v-cloak> 现在时间：<div v-relative-time="now"></div><p></p> 2019/1/6 13:45:02:<div v-relative-time="1546753502000"></div><p></p> 2019/1/6 8:02:02:<div v-relative-time="1546732922000"></div><p></p> 2019/1/5 22:02:02:<div v-relative-time="before"></div><p></p> 2019/1/1 22:02:02:<div v-relative-time="1546351322000"></div><p></p> 2018/1/6 8:02:02:<div v-relative-time="1515196922000"></div> </div> <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script> <script src="https://www.jb51.net/index.js"></script> </body> </html>
注意：div v-relative-time 指令的入参为精确到毫秒的 Unix 时间戳，如果入参单位为秒，那么可以乘以 1000 后，再传入。
js：
/** * 时间对象 * @type {{getCurrentUnix: Time.getCurrentUnix, getTodayUnix: Time.getTodayUnix, getThisYearUnix: Time.getThisYearUnix, format: Time.format, compensateZero: Time.compensateZero, transform: Time.transform}} */ var Time = { //获取当前 Unix 时间戳 getCurrentUnix: function () { return new Date().getTime(); }, //获取今日 0 点 0 分 0 秒的 Unix 时间戳 getTodayUnix: function () { var date = new Date(); date.setHours(0); date.setMinutes(0); date.setSeconds(0); date.setMilliseconds(0); return date.getTime(); }, //获取今年 1 月 1 日 0 点 0 分 0 秒的 Unix 时间戳 getThisYearUnix: function () { var date = new Date(); date.setMonth(0); date.setDate(1); date.setHours(0); date.setMinutes(0); date.setSeconds(0); date.setMilliseconds(0); return date.getTime(); }, //格式化日期；输出格式为 xxxx-xx-xx format: function (val) { var dateObj = new Date(val); //month 代表月份的整数值从0（1月）到11（12月），所以需要转换 var month = this.compensateZero(dateObj.getMonth() + 1); var day = this.compensateZero(dateObj.getDate()); return dateObj.getFullYear() + '-' + month + '-' + day; }, /** * 如果值小于 10，那么在前面补一个零 * @param val * @returns {*} */ compensateZero: function (val) { if (typeof val == 'number') { return val < 10 ? '0' + val : val; } else { return val; } }, /** * 转换为相对时间 * * 1 分钟之前，返回“刚刚” * 1 分钟到 1 小时之间，返回“xx 分钟前” * 1 小时到 1 天之间，返回“xx 小时前” * 1 天到 1 个月（假设固定为 31 天）之间，返回“xx 天前” * 大于 1 个月，返回“xx 年 xx 月 xx 日” * @param val unix 时间戳 */ transform: function (val) { //计算时间间隔（单位：s） console.log("getCurrentUnix:" + this.getCurrentUnix()); var interval = (this.getCurrentUnix() - val) / 1000; if (Math.floor(interval / 60) <= 0) {//1 分钟之前 return '刚刚'; } else if (interval < 3600) {//1 分钟到 1 小时之间 return Math.floor(interval / 60) + ' 分钟前'; } else if (interval >= 3600 && (val - this.getTodayUnix() >= 0)) {//1 小时到 1 天之间 return Math.floor(interval / 3600) + ' 小时前'; } else if (interval / (3600 * 24) <= 31) {//1 天到 1 个月（假设固定为 31 天）之间 return Math.ceil(interval / (3600 * 24)) + ' 天前'; } else { return this.format(val); } } };
时间转换逻辑为：
如果是 1 分钟之前，返回“刚刚”
如果是 1 分钟到 1 小时之间，返回“xx 分钟前”
如果是 1 小时到 1 天之间，返回“xx 小时前”
如果是 1 天到 1 个月（假设固定为 31 天）之间，返回“xx 天前”
如果是大于 1 个月，返回“xx 年 xx 月 xx 日”
我们专门设计了一个 Time 对象，用于定义与时间相关的函数：
获取当前 Unix 时间戳。
获取今日 0 点 0 分 0 秒的 Unix 时间戳。
获取今年 1 月 1 日 0 点 0 分 0 秒的 Unix 时间戳。
格式化日期函数，输出格式为 xxxx-xx-xx。
如果值小于 10，那么在前面补一个零的格式化函数。
转换为相对时间。
以下是与时间相关的小知识：
Math.floor() Math.ceil()