在Vue 3中，我们可以使用JavaScript的Date对象来获取当前时间，并基于当前时间计算未来一周的日期。然后，这些日期可以在Vue模板中循环显示。下面，我们将逐步完成这个任务，并附上相应的代码和注释。
步骤 1: 创建Vue 3项目
如果你还没有Vue 3项目，你可以使用Vue CLI创建一个。在命令行中运行：
npm install -g @vue/cli vue create my-vue3-project
选择默认配置或根据你的需要进行配置。
步骤 2: 在Vue组件中编写代码
- 在组件的
data函数中定义日期列表：
在Vue组件中，我们将在data函数中定义一个数组来存储未来一周的日期。
<script> export default { data() { return { nextWeekDates: [], // 用于存储未来一周的日期 }; }, // ... 其他选项 }; </script>
- 在
mounted钩子中计算并填充日期列表：
在组件的mounted钩子中，我们将获取当前日期，并计算未来一周的日期。
<script> export default { // ... 其他选项 mounted() { this.calculateNextWeekDates(); }, methods: { calculateNextWeekDates() { const today = new Date(); // 获取当前日期 this.nextWeekDates = []; // 清空数组 // 循环添加未来一周的日期 for (let i = 0; i < 7; i++) { // 设置日期为当前日期加上i天 today.setDate(today.getDate() + i); // 将日期转换为字符串格式并添加到数组中 // 这里我们使用YYYY-MM-DD的格式 const formattedDate = `${today.getFullYear()}-${('0' + (today.getMonth() + 1)).slice(-2)}-${('0' + today.getDate()).slice(-2)}`; this.nextWeekDates.push(formattedDate); } }, }, }; </script>
- 在模板中循环显示日期列表：
在Vue模板中，我们可以使用v-for指令来循环显示nextWeekDates数组中的日期。
<template> <div> <h2>未来一周的日期：</h2> <ul> <li v-for="(date, index) in nextWeekDates" :key="index">{{ date }}</li> </ul> </div> </template>
完整代码
将以上代码片段组合在一起，我们得到完整的Vue组件代码：
<template> <div> <h2>未来一周的日期：</h2> <ul> <li v-for="(date, index) in nextWeekDates" :key="index">{{ date }}</li> </ul> </div> </template> <script> export default { data() { return { nextWeekDates: [], }; }, mounted() { this.calculateNextWeekDates(); }, methods: { calculateNextWeekDates() { const today = new Date(); this.nextWeekDates = []; for (let i = 0; i < 7; i++) { today.setDate(today.getDate() + i); const formattedDate = `${today.getFullYear()}-${('0' + (today.getMonth() + 1)).slice(-2)}-${('0' + today.getDate()).slice(-2)}`; this.nextWeekDates.push(formattedDate); } }, }, }; </script>
