我如何在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>

演示1

或者，您可以将其移动到<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>

演示2