vue中根据时间戳判断对应的时间(今天昨天前天)

2023-08-04 05:01:03 148

根据时间戳来显示对应的时间段

本文是根据vue缩写，但是原理都是想通的

根据一个时间戳，然后来显示对应的时间段。如果为今天，则显示对应的time，如果为昨天，则显示为昨天，如果为前天，则显示为前天。剩下的显示为对应的日期

需求定义好了，然后开始实现：

首先，是把时间戳转换为对应的时间格式，js提供了原生的获取对应年、月、日等格式的方法，但是不够灵活，这里提供了一个网上找的比较灵活获取固定格式的函数。

constformatDate=(date,fmt)=>{
date=newDate(date);
if(typeof(fmt)==="undefined"){
fmt="yyyy-MM-ddHH:mm:ss";
}
if(/(y+)/.test(fmt)){
fmt=fmt.replace(RegExp.$1,(date.getFullYear()+'').substr(4-RegExp.$1.length))
}
leto={
'Y':date.getFullYear(),
'M+':date.getMonth()+1,
'd+':date.getDate(),
'H+':date.getHours(),
'm+':date.getMinutes(),
's+':date.getSeconds()
}
for(letkino){
if(newRegExp(`(${k})`).test(fmt)){
letstr=o[k]+''
fmt=fmt.replace(RegExp.$1,RegExp.$1.length===1?str:('00'+str).substr(str.length));
}
}
returnfmt
}

使用这个函数，需要提供一个时间戳和一个日期格式。

//`+newDate()`为获取当前时间戳的简写形式
//`yyyy-MM-ddHH:mm:ss`为想要获取的日期格式
formatDate(+newDate(),'yyyy-MM-ddHH:mm:ss')//2019-12-1820:29:31

接下来是使用过滤器来对时间戳进行过滤。vue提供了过滤器，可以定义全局过滤器和本地过滤器，我们定义一个本地过滤器

//common.js
//这里使用模块化，把过滤器函数定义在外部js文件内
constformatDate......

export{formatDate}

//index.vue
import{formatDate}from'common'

exportdefault{
data(){
return{
time:1576673222857
}
},
methods:{},
created(){},
filters:{
formateDate(data,fmt){
returnformatDate(data,fmt)
}
}
}

定义好了过滤器，就可以在页面中使用了

//index.vue

使用|（管道符）来对时间戳进行过滤，管道符左侧为过滤器的第一个参数，第二个参数为过滤的格式。定义好之后就会根据格式显示对应的时间格式了。

接下来最后一步就是对比今天的日期，来显示对应的时间（昨天，前天）
这里使用vue的ifelse来判断应该显示哪种日期格式。

好了，以上是根据日期去比较来显示对应的时间。——但是，你以为完了吗？

有一个重要的问题就是，每个月都有30日中的其中一日，今天是12月18日，比较18相等，显示对应的时间，但是如果为11月18日呢？如果还显示对应的时间显然是不对了。

所以应该把年、月、日全都对比一下，然后在确定对应的时间。

所以代码应该如下：

{{time|FormatDate('HH:mm')}}

昨天

前天

{{time|formateDate('MM-dd')}

虽然是完成了比较年月日后，来显示对应的日期。但是看看这些代码巨丑无比，而且极不容易理解，所以，我们不应该在html里面写这么多判断代码，so，我们来封装成一个函数，然后在来使用函数对比。

在封装函数之前，我们先确定一下，上面这些判断代码中，有哪些相同的地方，哪些不同的地方。

相同的是

使用newDate(time)来对比newDate()
使用getDate()/getMonth()/getYear()
使用两个&&来对比

不同的是

一个newDate()里面需要参数time，一个不要参数

有些需要-对应的数字

大概梳理了一下出以上部分，把相同的写进函数内，不同的使用形参，也就是arguments。

//common.js

constcompareDate=(timestamp,day=0)=>{
//timestamp为要传入的时间戳
//day为要减去的日子因为比较*当天*的话，是不需要减的，所以默认定义成0,

//根据上面分析，有些需要参数`time`，有些不需要，所以使用一个函数来区分一下
letnewDate=(time=null)=>{
returntime===null?newDate():newDate(time)
}

//这里返回比较后的值，比较成功，则返回`true`，失败则返回`false`
return(newDate(timestamp).getDate()==newDate().getDate()-day)&&(newDate(timestamp).getMonth()==newDate().getMonth())&&(newDate(timestamp).getYear()==newDate().getYear())
}

export{
compareDate
}

上面就是封装好的函数，但是有一个问题，就是函数里面写死了比较年月日，因为目前都需要比较三个，就先这样，有时间在改为根据参数在来区分比较年或月或日。

然后就可以使用了，使用的时候需要注意一下，我的这篇博客里面已经说了，这里就不细说，直接放代码：

//index.vue
import{compareDate}from'common.js'
data(){
return{
compare:compareDate
}
}

这样是不是简洁了很多呢？，而且也容易理解，看着也清晰。

以上就是根据时间戳，来比较当前时间显示对应的日期。如果有更好的方法欢迎讨论。如果有疑问也可以留言。

总结

以上所述是小编给大家介绍的vue中根据时间戳判断对应的时间(今天昨天前天)，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

vue中根据时间戳判断对应的时间(今天 昨天 前天)

热门推荐

随机推荐

vue中根据时间戳判断对应的时间(今天昨天前天)