Vuejs：如何循环开始时间以将结束时间与var x相乘

Posted 2023-02-16

【中文标题】Vuejs：如何循环开始时间以将结束时间与var x相乘

【英文标题】：Vuejs: how to loop start time to multiply end time with var x

【发布时间】：2020-12-27 16:51:15

【问题描述】：

我有数据 start_time、end_time、x 和 result。我想在select选项中显示，第一个选项是初始数据start_time，继续循环变量x的倍数，直到值等于end_time为止。这是期望。

这是我的看法：

<select class="form-control">
    <option>08:00:00</option>
    <option>08:15:00</option>
    <option>08:30:00</option>
    <option>08:45:00</option>
    <option>09:00:00</option>
    <option>...</option>
    <option>19:00:00</option>
</select>

这是我的代码：

data: function () 
    return 
        start_time: '08:00:00',
        end_time: '19:00:00',
        x: 15,
        result:'',
    
,
computed:

【参考方案1】：

您可以做的是创建一个计算属性，该属性返回一个数组，其中包含给定start_time 和end_time 约束的所有可用时间选项。然后使用v-for 将其循环到您的<option/> 元素。

  <select class="form-control">
    <option v-for="(time, index) in times" :key="index">time</option>
  </select>

computed: 
  times() 
    // transform the start_time and end_time to Date for easier comparison.
    let startTime = new Date(`1/1/1970 $this.start_time`);
    const endTime = new Date(`1/1/1970 $this.end_time`);

    // This interval is in Minutes.
    const interval = this.x * 60000;

    // The result array where we will store the time
    const results = [];

    while (startTime.getTime() <= endTime.getTime()) 
      results.push(`$this.formatTime(startTime)`);
      startTime = new Date(startTime.getTime() + interval);
    

    return results;
  
,
methods: 
  formatTime(date) 
    // format the date here...
    return '00:00:00';
  

对于格式化日期，您可以使用第三方库来完成这项工作，也可以使用 vanilla javascript。

formatTime(date) 
  const hours = date.getHours().toString().padStart(2, "0");
  const minutes = date.getMinutes().toString().padStart(2, "0");
  const seconds = date.getSeconds().toString().padStart(2, "0");
  return `$hours:$minutes:$seconds`;

这是一个有效的demo。