在Vue项目中，根据时间戳来判断显示的时间段（例如今天、昨天、前天）是一项常见的需求。本文将详细介绍如何利用JavaScript的时间处理和Vue的过滤器功能来实现这一功能。
我们需要将时间戳转换为一个可读的时间格式。JavaScript原生提供了获取时间的方法，例如`Date`对象可以获取到年、月、日、时、分、秒等信息。但是，为了满足特定的格式化需求，通常会使用一些现成的函数来更灵活地控制日期时间的显示格式。一个流行的方案是编写一个通用的格式化函数，这个函数可以接受一个时间戳和一个格式字符串作为参数，然后返回按照指定格式化后的时间字符串。
下面是一个示例函数`formatDate`，这个函数可以将给定的时间戳转换为不同的格式字符串：
```javascript
function formatDate(date, fmt) {
date = new Date(date);
if (typeof(fmt) === "undefined") {
fmt = "yyyy-MM-dd HH:mm:ss";
}
let o = {
'Y': date.getFullYear(),
'M+': date.getMonth() + 1,
'd+': date.getDate(),
'H+': date.getHours(),
'm+': date.getMinutes(),
's+': date.getSeconds()
}
let ret = fmt;
for (let k in o) {
if (new RegExp(`(${k})`).test(fmt)) {
let str = o[k] + '';
ret = fmt.replace(RegExp.$1, RegExp.$1.length === 1 ? str : ('00' + str).substr(str.length));
}
}
return ret;
}
```
此函数首先创建一个`Date`对象，然后检查`fmt`是否定义，如果没有，则使用默认的格式字符串。接着它会循环遍历格式字符串中的每一个部分，如果字符串中存在相应的日期或时间部分，就用实际的值替换它。
接下来，我们需要在Vue中定义一个过滤器`formateDate`，这样就可以在模板中使用它来格式化时间戳了：
```javascript
filters: {
formateDate(data, fmt) {
return formatDate(data, fmt);
}
}
```
在Vue模板中，我们可以利用这个过滤器来显示相应格式的时间。为了使用过滤器，我们先需要引入该函数。假设我们有一个外部的`common.js`文件，我们将该函数定义在其中：
```javascript
// common.js
export { formatDate }
```
然后在Vue文件中引入并使用它：
```javascript
// index.vue
import { formatDate } from 'common'
export default {
data() {
return {
time: ***
}
},
filters: {
formateDate(data, fmt) {
return formatDate(data, fmt);
}
}
}
```
在Vue模板中使用过滤器：
```html
<!-- index.vue -->
<template>
<div>
<span>{{ time | formateDate('MM-dd') }}</span>
</div>
</template>
```
`|`符号（管道符）表示过滤器的开始，`formateDate('MM-dd')`即是我们定义的过滤器，它接受时间戳`time`作为第一个参数，以及我们想要的日期格式`MM-dd`作为第二个参数。
为了显示“今天”、“昨天”和“前天”，我们需要比较时间戳所代表的日期和当前日期。这可以通过Vue的`v-if`、`v-else-if`、`v-else`指令来实现。比如：
```html
<!-- index.vue -->
<template>
<div>
<span v-if="new Date(time).getDate() === new Date().getDate()">{{ time | formateDate('HH:mm') }}</span>
<span v-else-if="new Date(time).getDate() === new Date().getDate() - 1">{{ time | formateDate('HH:mm') }}</span>
<span v-else-if="new Date(time).getDate() === new Date().getDate() - 2">{{ time | formateDate('HH:mm') }}</span>
<span v-else>{{ time | formateDate('MM-dd') }}</span>
</div>
</template>
```
这样，我们就可以根据时间戳与当前日期的差值来判断应该显示“今天”、“昨天”还是“前天”。如果时间戳对应的日期与当前日期相同，就是“今天”，差一天就是“昨天”，差两天就是“前天”。如果都不是，就显示为具体的日期。
总结来说，本文介绍了在Vue中利用JavaScript的Date对象方法、自定义的日期格式化函数以及Vue的过滤器和条件渲染指令来实现基于时间戳的时间显示功能。这个功能允许我们根据当前时间来相对比较时间戳，从而显示“今天”、“昨天”、“前天”或者其他日期。通过适当的封装和模块化，这一功能可以很容易地集成到Vue项目的任何部分。
