Vue3半年时间段选择器

Vue3 中可以使用新的 Composition API 来编写半年时间段选择器。以下是一个简单的例子：

<template>
  <div>
    <label for="startMonth">起始月份：</label>
    <select id="startMonth" v-model="startMonth">
      <option v-for="(month, index) in months" :key="index" :value="month">{{ month }}</option>
    </select>
    <label for="endMonth">结束月份：</label>
    <select id="endMonth" v-model="endMonth">
      <option v-for="(month, index) in months" :key="index" :value="month">{{ month }}</option>
    </select>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const months = ref([
      '1月',
      '2月',
      '3月',
      '4月',
      '5月',
      '6月',
      '7月',
      '8月',
      '9月',
      '10月',
      '11月',
      '12月',
    ]);
    const startMonth = ref('1月');
    const endMonth = ref('6月');

    return {
      months,
      startMonth,
      endMonth,
    };
  },
};
</script>

在这个例子中，我们使用了 Vue3 的 Composition API 来定义了一个 `setup` 函数。在 `setup` 函数中，我们使用了 `ref` 函数来创建了三个响应式变量：`months`、`startMonth` 和 `endMonth`。其中，`months` 是一个包含所有月份的数组，`startMonth` 和 `endMonth` 分别表示选择的起始月份和结束月份。

在模板中，我们使用了 `v-model` 指令来实现数据的双向绑定。当用户选择某个月份时，对应的变量的值也会被更新。