Vue.js实现从start_time到end_time按x分钟间隔生成下拉选项

Got it, let's solve this problem step by step. You need to generate a list of time options from your start_time to end_time, incrementing by x minutes each time. Here's how to implement this in Vue's computed property:

First, add this logic to your computed property:

computed: {
  timeOptions() {
    // Helper function to format Date objects into HH:mm:ss string
    const formatTime = (date) => {
      const hours = String(date.getHours()).padStart(2, '0');
      const minutes = String(date.getMinutes()).padStart(2, '0');
      const seconds = String(date.getSeconds()).padStart(2, '0');
      return `${hours}:${minutes}:${seconds}`;
    };

    // Convert time strings to Date objects (use a fixed base date to avoid date conflicts)
    const baseDate = '2024-01-01';
    const startDate = new Date(`${baseDate} ${this.start_time}`);
    const endDate = new Date(`${baseDate} ${this.end_time}`);

    const startMs = startDate.getTime();
    const endMs = endDate.getTime();
    const intervalMs = this.x * 60 * 1000; // Convert x minutes to milliseconds

    const options = [];
    let currentMs = startMs;

    // Loop through each interval until we reach or exceed end_time
    while (currentMs <= endMs) {
      const currentDate = new Date(currentMs);
      options.push(formatTime(currentDate));
      currentMs += intervalMs;
    }

    return options;
  }
}

Then update your template to render the options:

<select class="form-control">
  <option v-for="time in timeOptions" :key="time">{{ time }}</option>
</select>

Let's break down the logic:

1. Time Formatting: The formatTime helper ensures all time components (hours, minutes, seconds) are two-digit strings (e.g., turning 8 into 08).
2. Date Conversion: We append a fixed base date to your start_time and end_time to create valid Date objects—this avoids issues with date rollover since we only care about the time portion.
3. Interval Calculation: Convert your x minutes into milliseconds (since JavaScript uses milliseconds for time calculations) to easily increment each step.
4. Loop Through Intervals: Start at the start_time timestamp, add the interval each time, format the time, and push it to the options array until we pass the end_time timestamp.

• This assumes your start_time and end_time are in valid HH:mm:ss format. If your input formats vary, you might need to adjust the date parsing logic.
• The :key="time" in the template is required for Vue's list rendering efficiency.

内容的提问来源于stack exchange，提问作者Fenz