vue2中 moment如何把开始时间到结束时间的多少个小时以00:00-01:00这种形式展现出来

要将2023-08-07 00:00:00到2023-08-10 00:00:00之间的小时数以"00:00-01:00"这种形式展示出来，您可以按照以下步骤进行操作：

1.确保您已经在Vue项目中安装了Moment.js库。您可以使用npm或yarn来安装它

npm install moment
或
yarn add moment

2.在Vue组件中导入Moment.js库：

import moment from 'moment';

3.在模板中，使用计算属性来格式化时间范围：

<template>
  <div>
    <p>{{ formattedTimeRange }}</p>
  </div>
</template>

4.在Vue组件中定义计算属性来格式化时间范围：

export default {
  data() {
    return {
      startTime: '2023-08-07 00:00:00',
      endTime: '2023-08-10 00:00:00'
    };
  },
  computed: {
    formattedTimeRange() {
      const start = moment(this.startTime);
      const end = moment(this.endTime);
      const hoursDiff = end.diff(start, 'hours');
      const timeRange = [];

      for (let i = 0; i <= hoursDiff; i++) {
        const currentHour = start.clone().add(i, 'hours');
        const formattedHourStart = currentHour.format('HH:mm');
        const formattedHourEnd = currentHour.clone().add(1, 'hours').format('HH:mm');
        const id = i + 1; // Generate ID for each time range

        timeRange.push({ id, range: `${formattedHourStart}-${formattedHourEnd}` });
      }

      return timeRange;
    }
  }
};

 

在上述代码中，我们创建了一个名为timeRange的空数组，用于存储每个时间范围的对象。在循环中，我们使用currentHour.clone()来克隆当前小时对象，以确保时间范围的结束时间是正确的。然后，我们生成一个ID，可以根据需要进行修改，将每个时间范围的ID和格式化的时间范围作为一个对象添加到timeRange数组中。

现在，formattedTimeRange计算属性将返回一个包含每个时间范围对象的数组，每个对象都有一个ID和格式化的时间范围。您可以在模板中使用v-for指令来遍历并显示这些时间范围对象。

请注意，为了避免每个时间范围的ID从0开始，我们在生成ID时添加了1。您可以根据实际需求进行调整。