如何在 Vue3 的 v-for 循环中获取接下来的 6 天？

Question

我有一个特定的日期，然后我想得到接下来的 6 天（提前一周的组件类型）。我在想我可以有我的初始日期，然后做一个 v-for 范围循环，比如：

<span v-for="n in 7">{{ n }}</span>

第一个元素是传入日期。但我不确定实现此目标的最佳方法是什么？

Answer 1

可以直接在 <template>:

中计算接下来的 7 个日期

<span v-for="n in 7">{{ new Date().setDate(new Date().getDate() + n) }}</span>

或者，您可以将其移至 <script> 以整理 <template>:

<script setup>
const today = new Date()
const nextSevenDays = Array(7).fill().map((_, i) => new Date(today).setDate(today.getDate() + i))
</script>

然后更新 v-for 来渲染它：

<template>
  <span v-for="date in nextSevenDays">{{ date }}</span>
</template>

How can I get the next 6 days in a v-for loop in Vue3?