### 实现
获取七
天前的
时间
为了在 Vue
3 项目中计算并
获取七
天前的
时间戳或
日期字符串，可以采用 JavaScript 的 `Date` 对象来进行
日期运算。下面是一个具体的实现方式：
#### 使用纯 JavaScript
获取七
天前的
日期
通过创建一个新的 `Date` 对象表示当
前时间，再使用 `setDate()` 和 `getDate()` 方法调整
日期以达到减去七
天的效果。
```javascript
function getPreviousWeekDate() {
const today = new Date();
const previousWeek = new Date(today);
previousWeek.setDate(today.getDate() - 7);
// 将结果格式化为 YYYY-MM-DD 字符串形式返回
function formatDate(date) {
let month = &#
39;&#
39; + (date.getMonth() + 1),
day = &#
39;&#
39; + date.getDate(),
year = date.getFullYear();
if (month.length < 2)
month = &#
39;0&#
39; + month;
if (day.length < 2)
day = &#
39;0&#
39; + day;
return [year, month, day].join(&#
39;-&#
39;);
}
return formatDate(previousWeek);
}
```
此函数会根据今
天的
日期自动算出一周之
前的
日期，并将其格式化为标准的 ISO8601 格式的字符串[^1]。
#### 结合 Vue
3 组件使用
如果是在 Vue
3 单文件组件内，则可以直接定义该逻辑作为 computed 属性的一部分以便于模板绑定显示。
```html
<template>
<div>{{ formattedPreviousWeek }}</div>
</template>
<script setup>
import { ref, computed } from &#
39;vue&#
39;;
const now = new Date();
const sevenDaysAgo = computed(() => {
const prevWeek = new Date(now);
prevWeek.setDate(now.getDate() - 7);
// 返回 Unix
时间戳 或者 格式化的
日期字符串
return prevWeek.getTime(); // 如果想要
时间戳就用这个
//return `${prevWeek.getFullYear()}-${String(prevWeek.getMonth()+1).padStart(2,&#
39;0&#
39;)}-${String(prevWeek.getDate()).padStart(2,&#
39;0&#
39;)}`; // 如果要格式化后的
日期则取消注释这一行
});
</script>
```
这里展示了两种不同的输出选项：一种是以毫秒级精度的
时间戳形式；另一种则是经过美化处理过的可读性强的人类友好型
日期表达。
#### 利用第三方库简化操作
对于更加复杂的场景或是追求更高的开发效率时，推荐考虑引入像 Day.
js 这样的轻量级
日期处理工具来辅助完成任务。Day.
js 提供了一个简单易懂的方法链语法糖使得开发者能够轻松地进行各种各样的
日期变换工作而无需担心跨浏览器兼容性等问题。
```javascript
// 安装命令 npm install day
js --save
import day
js from &#
39;day
js&#
39;;
let lastWeek = day
js().subtract(7, &#
39;days&#
39;).format(&#
39;YYYY-MM-DD&#
39;); // 输出形如 "2024-11-1
3"
console.log(lastWeek);
```
这种方法不仅简洁明了而且易于维护更新，在实际项目中有很高的实用性价值[^2]。
本文介绍了一种使用原生JavaScript获取三天前日期的方法，并展示了如何格式化日期。通过简单的代码实现，帮助开发者快速掌握日期处理技巧。
扫一扫
2251
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
