Vue.js点击指定天数按钮计算对应日期并展示到输入框的实现问题

核心问题说明 #

现有代码的getDate方法仅生成日期数组并打印输出，未将计算后的格式化日期赋值给绑定的输入框变量data.date，且日期计算、格式化逻辑不符合需求。

完整修改后代码 #

模板部分（基本无修改，可按需调整TODAY按钮参数） #

<template>
    <div>
        <div class="btn-group">
            <!-- 若需要TODAY显示当天，将参数改为0即可，原参数1为次日 -->
            <button @click="getDate(0)" class="btn">TODAY</button>
            <button @click="getDate(7)" class="btn">7 DAY</button>
            <button @click="getDate(14)" class="btn">14 DAY</button>
            <button @click="getDate(30)" class="btn">30 DAY</button>
            <button @click="getDate(45)" class="btn">45 DAY</button>
            <button @click="getDate(60)" class="btn">60 DAY</button>
        </div>
        <div>
            <input v-model="data.date">
        </div>
    </div>
</template>

脚本部分 #

<script>
export default {
    data() {
        return {
            data: {
                date: "",
            }
        }
    },
    methods: {
        // 补零工具方法，不足10的数字前补0
        padZero(num) {
            return num < 10 ? `0${num}` : num
        },
        getDate(day) {
            // 计算目标日期：当前时间 + 指定天数的毫秒数
            const targetDate = new Date(Date.now() + day * 24 * 60 * 60 * 1000)
            // 格式化日期为DD.MM.YYYY，注意月份从0计数需要+1
            const formattedDate = `${this.padZero(targetDate.getDate())}.${this.padZero(targetDate.getMonth() + 1)}.${targetDate.getFullYear()}`
            // 赋值给绑定变量，输入框自动同步更新
            this.data.date = formattedDate
        },
    }
}
</script>

实现说明 #

• 点击按钮传入的day参数为需要累加的天数，若需要计算历史日期可直接传入负数
• 自动对日期、月份做补零处理，完全符合DD.MM.YYYY的格式要求
• 计算完成后直接赋值给双向绑定的data.date变量，输入框会自动同步内容

内容的提问来源于stack exchange，提问作者Selaminko Elam