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

data() {
  return {
    time: {
      hour: 0,
      minute: 0,
      second: 0
    },
    displayTime: ""
  }
}

<input v-model="time.hour" type="number" min="0" max="23">
<input v-model="time.minute" type="number" min="0" max="59">
<input v-model="time.second" type="number" min="0" max="59">

computed: {
  displayTime() {
    let hour = this.time.hour;
    let minute = this.time.minute;
    let second = this.time.second;
    let period = hour >= 12 ? "PM" : "AM";

    // 转换为12小时制
    hour = hour % 12;
    hour = hour ? hour : 12;

    // 格式化为两位数
    hour = hour.toString().padStart(2, "0");
    minute = minute.toString().padStart(2, "0");
    second = second.toString().padStart(2, "0");

    return `${hour}:${minute}:${second} ${period}`;
  }
}

<p>{{ displayTime }}</p>