就我个人而言，试图在一条线上做所有事情会导致我遇到这样的问题。要正确地工作是很困难的，更难阅读/理解。我更喜欢把它分解成一个方法，在这个方法中，过程可以通过多个步骤来执行和理解。使用v-timepicker update：period方法跟踪AM/PM也有帮助

<h3>
    12hrs time: 
    {{ standardTime() }}
</h3>
<input type="time" v-model="time" />
<v-time-picker v-model="time" @update:period="changePeriod"></v-time-picker>

data() {
    return {
      time: '',
      period: 'am'
    }
  },
  methods: {
    standardTime() {
      const militaryHours = this.time.split(':')[0]
      const minutes = this.time.split(':')[1]
      const standardHours = militaryHours % 12 === 0 ? 12 : militaryHours % 12
      return `${standardHours}:${minutes} ${this.period.toUpperCase()}`;
    },
    changePeriod(period) {
      this.period = period
    }
  }

updated codepen
。。。如果你真的愿意，你可以把它们全部浓缩成一行，现在各个部分都在工作

function standardTime() {
    return `${this.time.split(':')[0] % 12 === 0 ? 12 : this.time.split(':')[0] % 12}:${this.time.split(':')[1]} ${this.period.toUpperCase()}`;
}

很好。希望以后不需要维护：）

我建议您利用原生Intl.DateTimeFormat API。它允许您配置输出字符串的样式，并适应用户的区域设置。

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data() {
    return {
      time: '',
    }
  }
})

<link href="https://cdnjs.cloudflare.com/ajax/libs/vuetify/2.1.12/vuetify.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuetify/2.1.12/vuetify.min.js"></script>

<div id="app">
    <v-app>
        <v-card id="table-card">
          <div>
            <h3>
                24hrs time: 
                {{ time }}
            </h3>

            <h3>
                12hrs time: 
                {{ 
                    // year = 0, month = 0, day = 0. hour and minute are set to the hour and minute from the time picker
                    new Date(0, 0, 0, ...time.split(":"))
                      .toLocaleString(undefined, { timeStyle: "short" })
                }}
            </h3>
            <input type="time" v-model="time" />
            <v-time-picker v-model="time"></v-time-picker>
        </div>
        </v-card>
    </v-app>
</div>