vue3中使用日期选择器默认显示三天的数据

在 Vue3 中使用日期选择器默认显示三天的数据，可以通过计算属性和数组的操作来实现。

首先，在 data 中定义一个数组，用于存储日期数据：

data() {
  return {
    days: []
  }
}

然后，在 mounted 钩子函数中，计算当前日期和未来两天的日期：

mounted() {
  const date = new Date();
  for (let i = 0; i < 3; i++) {
    const year = date.getFullYear();
    const month = date.getMonth() + 1;
    const day = date.getDate();
    const dateString = `${year}-${month}-${day}`;
    this.days.push(dateString);
    date.setDate(date.getDate() + 1);
  }
}

上述代码中，首先获取当前日期，然后使用循环计算出未来两天的日期，并将日期字符串添加到 days 数组中。

最后，在模板中使用 v-for 指令渲染日期选择器的选项：

<template>
  <div>
    <select v-model="selectedDate">
      <option v-for="day in days" :key="day" :value="day">{{ day }}</option>
    </select>
  </div>
</template>

在上述代码中，使用 v-for 指令循环遍历 days 数组，渲染每个日期选项。同时，使用 v-model 指令将选择器的值绑定到 selectedDate 变量上，以便在组件中获取用户选择的日期。