在Vue.js中获取当前日期的前一天，可通过JavaScript的Date对象实现，首先创建当前日期对象new Date()，调用setDate()方法将日期减1，如date.setDate(date.getDate() - 1)，Date对象会自动处理跨月、跨年逻辑，若需格式化日期，可结合toISOString()或自定义格式化方法，在Vue组件中，可将此逻辑封装在methods或computed中，methods: { getYesterday() { const date = new Date(); date.setDate(date.getDate() - 1); return date; } }，调用时直接使用this.getYesterday()即可获取前一天日期对象。
Vue.js 中获取当前日期前一天的实用方法与代码示例
在开发 Vue.js 项目时，经常需要处理日期相关的逻辑，比如获取当前日期的前一天作为数据筛选条件、表单默认值或日志记录时间戳，本文将详细介绍几种在 Vue.js 中获取当前日期前一天的方法，包括原生 JavaScript Date 对象和第三方库 day.js 的实现,并附上完整的代码示例和注意事项。
为什么需要获取"当前日期的前一天"？
在实际业务中,获取前一天的日期应用场景非常广泛：
- 数据筛选：查询"昨天"的用户活跃数据、订单记录等；
- 表单默认值：设置"结束日期"为昨天,避免用户选择未来时间；
- 日志记录：在日志文件中标记"昨日"的操作记录；
- 时间计算：计算距离某个事件还有多少天,或者统计过去24小时的数据变化。
掌握正确的日期处理方法能显著提升开发效率,避免手动计算可能带来的错误。
使用原生 JavaScript Date 对象
Vue.js 本身不提供专门的日期处理工具，但我们可以直接依赖 JavaScript 原生的 Date 对象实现，核心思路是：获取当前日期 → 减去 1 天 → 处理边界情况（如跨月、跨年）→ 格式化输出。
基本实现步骤
（1）获取当前日期并减去 1 天
const currentDate = new Date(); // 获取当前日期（包含时间） const prevDate = new Date(currentDate); // 避免直接修改原日期 prevDate.setDate(currentDate.getDate() - 1); // 设置为前一天
（2）处理边界情况
setDate() 方法会自动处理跨月、跨年的逻辑：
- 当前是
2023-03-01，减 1 天后自动变为2023-02-28（平年）或2023-02-29（闰年）； - 当前是
2023-01-01，减 1 天后自动变为2022-12-31。
无需手动处理，Date 对象会自动计算这些边界情况。
（3）格式化日期为 YYYY-MM-DD 常用格式
const formatYear = prevDate.getFullYear();
const formatMonth = String(prevDate.getMonth() + 1).padStart(2, '0'); // 月份从 0 开始，+1 并补零
const formatDay = String(prevDate.getDate()).padStart(2, '0');
const prevDateStr = `${formatYear}-${formatMonth}-${formatDay}`; // 2023-12-31
封装为 Vue 组件方法
在 Vue 组件中，我们可以将日期处理逻辑封装到 methods 或 computed 中,提高代码复用性：
<template>
<div>
<p>当前日期：{{ currentDate }}</p>
<p>前一天日期：{{ prevDate }}</p>
<button @click="updatePrevDate">更新前一天日期</button>
</div>
</template>
<script>
export default {
data() {
return {
currentDate: '',
prevDate: ''
};
},
created() {
this.updateCurrentDate();
this.updatePrevDate();
},
methods: {
updateCurrentDate() {
const date = new Date();
this.currentDate = this.formatDate(date);
},
updatePrevDate() {
const currentDate = new Date();
const prevDate = new Date(currentDate);
prevDate.setDate(currentDate.getDate() - 1);
this.prevDate = this.formatDate(prevDate);
},
formatDate(date) {
const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, '0');
const day = String(date.getDate()).padStart(2, '0');
return `${year}-${month}-${day}`;
}
}
};
</script>
说明：
created钩子中初始化当前日期和前一天日期；formatDate方法统一格式化日期,避免重复代码；- 点击按钮可触发
updatePrevDate重新计算（适用于需要动态更新的场景）。
使用 day.js 轻量级日期库
原生 Date 对象虽然灵活，但格式化和计算逻辑稍显繁琐，推荐使用 day.js——一个轻量级（仅 2KB）、链式调用的日期库，API 设计与 moment.js 兼容,但更简洁。
安装 day.js
在 Vue 项目中通过 npm 或 yarn 安装：
npm install dayjs # 或 yarn add dayjs
基本使用
在组件中引入 day.js,通过链式调用轻松获取前一天日期：
import dayjs from 'dayjs';
const prevDate = dayjs().subtract(1, 'day').format('YYYY-MM-DD'); // 2023-12-31
核心方法：
dayjs()：获取当前日期；subtract(1, 'day')：减去 1 天（支持'year'、'month'、'hour'等单位）；format('YYYY-MM-DD')：格式化日期（支持自定义格式，如YYYY年MM月DD日）。
在 Vue 组件中封装
结合 Vue 的响应式特性,封装更简洁的组件：
<template>
<div>
<p>当前日期：{{ currentDate }}</p>
<p>前一天日期（day.js）：{{ prevDate }}</p>
<button @click="updatePrevDate">更新前一天日期</button>
</div>
</template>
<script>
import dayjs from 'dayjs';
export default {
data() {
return {
currentDate: '',
prevDate: ''
};
},
created() {
this.updateDates();
},
methods: {
updateDates() {
this.currentDate = dayjs().format('YYYY-MM-DD');
this.prevDate = dayjs().subtract(1, 'day').format('YYYY-MM-DD');
},
updatePrevDate() {
this.prevDate = dayjs().subtract(1, 'day').format('YYYY-MM-DD');
}
}
};
</script>
使用 date-fns 函数式日期库
除了 day.js，date-fns 是另一个优秀的日期处理库，它采用函数式编程风格,提供丰富的日期操作函数。
安装 date-fns
npm install date-fns # 或 yarn add date-fns
基本使用
import { subDays, format } from 'date-fns';
const prevDate = format(subDays(new Date(), 1), 'yyyy-MM-dd'); // 2023-12-31
在 Vue 组件中封装
<template>
<div>
<p>当前日期：{{ currentDate }}</p>
<p>前一天日期（date-fns）：{{ prevDate }}</p>
<button @click="updatePrevDate">更新前一天日期</button>
</div>
</template
