在社区中，发布的动态信息往往有一个大于实际发布时间的相对时间。比如这里的微博：

服务器存储的时间格式一般为Unix时间戳，例如2019/1/6 13:40:1的Unix时间戳为1546753201651。前端获得这个时间戳后，会转换成可读的格式。在社交产品中，时间戳通常转换为X分钟前、X小时前或X天前，因为这种显示方式有更好的用户体验。

我们可以定制一个v-相对时间指令来实现上述功能。

html:

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' title title/title style type=' text/CSS '/style/流浆池div id=' app ' v-斗篷现在时间：div v-相对时间=' now '/div p/p 2019/1/6 13:45336043360 div v-相对时间=' 1546753502000 '/div p/p 2000 6 880

js:

/* * * time对象* @ type { { getcurrentnix 3360 time . getcurrentnix，gettoadyunix 3360 time . gettoadyunix，gethisarunix : time . gethisarunix，Format:Time。格式，补偿3360次。补偿器，变压器3360次。transform } } */VarTime={//获取当前Unix时间戳getcurrentnix : function(){返回新日期()。gettime()；}，//获取Unix时间戳getodayunix 3360 function(){ var date=new date()；date . sethours(0)；date . setminutes(0)；date . setseconds(0)；date .set毫秒(0)；return date . GetTime()；}，//获取今年1月1日0: 00: 00的Unix时间戳gethisarunix : function(){ var date=new date()；date . setmonth(0)；date . setdate(1)；date . sethours(0)；date . setminutes(0)；date . setseconds(0)；date .set毫秒(0)；return date . GetTime()；}，//格式化日期；输出格式为xxxx-xx-xx format:函数(val){ var date obj=new date(val)；//month表示从0(1月)到11(12月)的整数值，所以需要将varmonth=this进行转换。补偿零点(dateobj。getmonth()1)；var day=this .补偿器(DateObj . GetDate())；return date obj . getfullyear()“-”月-”日；}，/* * *如果该值小于10，则添加一个零* @ param val * @ returns { * } */补偿器：函数(val){ If(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(' getcurrentnix 3360 ' this . getcurrentnix())；var interval=(this . GetCurrentUnix()-val)/1000；If(数学。floor(interval/60)=0){//返回1分钟前的' just '；} else if(间隔3600) {//1/return Math.floor(间隔/60)'分钟前'；} else if (interval=3600 (val-this。gettodayunix()=0)){//返回Math.floor(interval/3600)'小时前'；} else if(interval/(3600 * 24)=31){//返回math。天花板(间隔/(3600 * 24))'天前'；} else {返回this . format(val)；} }};时间转换逻辑是：

如果是1分钟前，返回“刚”，如果是1分钟到1小时之间，返回“xx分钟前”，如果是1小时到1天之间，返回“xx天前”，如果是1个月以上，返回“xx年、xx月、xx日”。我们特别设计了一个时间对象。

获取当前的Unix时间戳。获取今天0: 00: 00: 00的Unix时间戳。获取今年1月1日0: 00: 00的Unix时间戳。格式化日期函数，输出格式为xxxx-xx-xx。如果该值小于10，则在其前面添加一个零格式功能。转换为相对时间。以下是一些与时间相关的提示：

Math.floor()Math.ceil()/** *相对时间指令*/vue.directive ('relative-time '，{bind: function (el，binding){ El . innerhtml=time . transform(binding . value)；埃尔。_ relative time=set interval(function(){ El . innerhtml=time . transform(binding . value)；}, 60000);//每分钟刷新一次}，解除绑定：函数(El) {clearinterval (El。_相对时间)；删除el。_ relativeTime}});var app=new Vue({ el: '#app '，data: { now: (new Date())。getTime()，//2019/1/5 22:02:02 before : 1546696922000 } })；在相对时间指令中，在bind()中，我们将指令中的参数转换成相对时间，然后写入指令所在的元素中，再定义一个定时器，每分钟更新元素内容。在unbind()中，清除计时器。

渲染结果：

编写自定义说明，建议如下：

在bind()中定义初始化操作，例如绑定一次性事件。解除绑定和删除操作在解除绑定()中定义。虽然DOM可以在自定义指令中任意操作，但它不是数据驱动的DOM。因此，在这种情况下，建议使用组件来满足业务需求。本文中的示例代码

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。