vue实现日期加减
使用 Date 对象实现日期加减
在 Vue 中可以直接使用 JavaScript 的 Date 对象进行日期加减操作。通过 setDate、setMonth 等方法修改日期，再通过 getDate、getMonth 等方法获取结果。
// 增加天数
const date = new Date();
date.setDate(date.getDate() + 7); // 加7天
// 减少月份
date.setMonth(date.getMonth() - 1); // 减1个月使用 moment.js 库处理日期
moment.js 是流行的日期处理库，提供了链式调用的 API，适合复杂的日期计算。
import moment from 'moment';
// 增加10天
const newDate = moment().add(10, 'days').format('YYYY-MM-DD');
// 减少3个月
const prevDate = moment().subtract(3, 'months').format('YYYY-MM-DD');使用 date-fns 库实现轻量级操作
date-fns 是模块化的日期工具库，适合按需引入，避免打包体积过大。
import { addDays, subMonths, format } from 'date-fns';
// 增加5天
const nextDay = addDays(new Date(), 5);
// 减少2个月并格式化
const formattedDate = format(subMonths(new Date(), 2), 'yyyy-MM-dd');在 Vue 组件中封装日期工具方法
将日期操作封装为组件方法，便于复用。以下示例展示如何在 Vue 组件中实现日期加减：
export default {
methods: {
addDays(baseDate, days) {
const date = new Date(baseDate);
date.setDate(date.getDate() + days);
return date;
},
formatDate(date) {
return date.toISOString().split('T')[0];
}
},
mounted() {
const tomorrow = this.addDays(new Date(), 1);
console.log(this.formatDate(tomorrow));
}
}处理时区问题
使用 toLocaleString 或库函数指定时区，避免因本地时区导致显示差异。
new Date().toLocaleString('en-US', { timeZone: 'Asia/Shanghai' });
// moment.js 时区处理
moment().tz('America/New_York').format();注意事项
- 月份从 0 开始计数（0 表示一月），使用
getMonth()和setMonth()时需注意。 - 跨月/年计算时，JavaScript 的
Date对象会自动处理进位。 - 对于生产环境，推荐使用
moment.js或date-fns等成熟库，避免手动处理边缘情况。
