日期处理|时间操作|vue实现获取当前日期及前一天的方法

📅 Vue日期处理指南：轻松获取当前日期及前一天

最新动态：随着前端技术的快速发展，Vue 3.4 在2025年进一步优化了响应式数据处理，日期操作变得更高效！🎉 无论是报表统计、日程管理还是数据过滤，掌握日期处理都是开发者必备技能。

为什么需要处理日期？

在日常开发中,我们经常遇到这些场景：

• 显示用户最后一次登录时间 🕒
• 生成最近7天的数据报表 📊
• 限制表单只能选择今天及之前的日期 ⏳

今天我们就用Vue实现获取当前日期和前一天日期的两种实用方案！

方案1：纯JavaScript实现

获取当前日期（YYYY-MM-DD格式）

// 在Vue的methods或setup中
getCurrentDate() {
  const today = new Date();
  const year = today.getFullYear();
  const month = String(today.getMonth() + 1).padStart(2, '0'); // 补零
  const day = String(today.getDate()).padStart(2, '0');
  return `${year}-${month}-${day}`; // 2025-08-20
}

获取前一天日期

getPreviousDate() {
  const yesterday = new Date();
  yesterday.setDate(yesterday.getDate() - 1); // 神奇的时间魔法✨
  const year = yesterday.getFullYear();
  const month = String(yesterday.getMonth() + 1).padStart(2, '0');
  const day = String(yesterday.getDate()).padStart(2, '0');
  return `${year}-${month}-${day}`;
}

💡 小技巧：

• 使用padStart(2,'0')确保月份和日期始终是两位数
• 该方法也适用于获取N天前/后的日期（只需修改减去的数字）

方案2：使用Day.js（推荐）

Day.js是轻量级的日期库（仅2KB），比原生API更易用：

1. 先安装：

   npm install dayjs

2. 在Vue中使用：

   import dayjs from 'dayjs';

// 获取当前日期 const today = dayjs().format('YYYY-MM-DD');

// 获取前一天 const yesterday = dayjs().subtract(1, 'day').format('YYYY-MM-DD');

**🌟 优势**：  
- 链式调用超简洁  
- 支持时区、本地化等高级功能  
- 避免原生Date的月份从0开始的坑  
---
## 四、完整Vue组件示例  
```html
<template>
  <div>
    <p>今天是：{{ currentDate }}</p>
    <p>昨天是：{{ previousDate }}</p>
  </div>
</template>
<script>
import dayjs from 'dayjs';
export default {
  data() {
    return {
      currentDate: '',
      previousDate: ''
    };
  },
  mounted() {
    this.currentDate = dayjs().format('YYYY-MM-DD');
    this.previousDate = dayjs().subtract(1, 'day').format('YYYY-MM-DD');
    // 或者使用原生JS版本
    // this.currentDate = this.getCurrentDate();
    // this.previousDate = this.getPreviousDate();
  },
  methods: {
    getCurrentDate() { /*...*/ },
    getPreviousDate() { /*...*/ }
  }
};
</script>

常见问题答疑

Q：为什么月份要+1？
A：JavaScript的getMonth()返回0-11（0=一月），这是历史遗留问题🤷‍♂️

Q：如何获取更复杂的格式？
A：Day.js支持多种格式：

dayjs().format('YYYY年MM月DD日 HH:mm:ss') // 2025年08月20日 14:30:00

最后建议：小型项目可用原生API，复杂日期操作优先选择Day.js或date-fns，现在就去你的Vue项目中试试吧！ 🚀

（本文方法测试于2025年8月，主流浏览器及Vue 3.4环境均适用）