Vue JS时隙生成器如何从对象中获取值并显示PM/AM

Question

我使用time-slots-generator包，为了显示从0:15到24:00的时间，问题是这个包不提供显示AM/PM的能力，我将不得不手动操作

为此，我从stackoverflow中获取了一些示例代码，然后对其进行了一点修改，得到了以下结果

  let hours = 23;
  let minutes = 32;
  let ampm = hours >= 12 ? 'pm' : 'am';
  hours = hours % 12;
  hours = hours ? hours : 12; // the hour '0' should be '12'
  minutes = minutes < 10 ? '0'+minutes : minutes;
  const strTime = hours + ':' + minutes + ' ' + ampm;
  console.log(strTime)

例如，如果您将hours的值更改为17，并将变量minute更改为25，那么您将得到17:25 pm。我认为这个函数的逻辑对您来说很清楚，它检查该值并显示AM或pm

现在我需要把这个逻辑和我的时间生成器联系起来，现在我正在使用一个循环来显示从0:15到24:00的时间，正如我前面提到的，这个循环看起来像这样

  data() {
    return {
      timeSlots: (ts.getTimeSlots([], true, "quarter")),
    }
  },

formatAMPM() {
  let val = Object.values(this.timeSlots);
    for (let prop in val) {
     console.log( val[prop]);
  }
}

通过这个循环，我得到以下结果

正如您已经理解的，现在我需要这样做，以便时间显示为AM或PM，也许您可以提供一个更简单的解决方案来解决这个问题，我将很高兴收到每一个建议，您可以在codesandbox中看到这个示例

Answer 1

对于日期，我推荐一个更健壮、更灵活的解决方案。使用date-fns'格式。

您可以在这里找到一个示例:https://github.com/date-fns/date-fns/issues/946#issuecomment-452766765

但是使用类似格式（new Date（）,“hh：mmaaaaa'm'”）应该足够好,并且在其之上具有灵活性。此外，与Momentjs不同的是，这个lib进行了优化，并且完成了很好的工作。