如何在Vuetify Time Picker中获取带A.M./P.M.的12小时制时间

问题根源分析 #

你遇到的三个问题本质原因如下：

1. 初始undefined：time变量未初始化，初始状态下调用split()会触发错误或返回undefined
2. AM无标识/PM显示异常：模板表达式用逗号分隔，Vue仅会解析最后一段内容；同时原逻辑未处理0点（午夜）和12点的特殊场景，导致12 AM显示为0:xx、12 PM逻辑混乱
3. 重复split冗余：多次调用time.split(':')既不高效，也增加出错概率

解决方案 #

推荐用计算属性处理时间格式化，模板仅负责展示，逻辑更清晰、易维护：

1. 初始化时间变量

在组件data中给time设置默认值，避免初始状态出现undefined：

data() {
  return {
    time: '00:00' // 可设为空字符串，但需在计算属性中处理空值情况
  }
}

2. 编写计算属性实现12小时制转换

computed: {
  formattedTime() {
    // 先判断time是否有效，避免初始或清空时出错
    if (!this.time) return ''
    
    const [hourStr, minute] = this.time.split(':')
    const hour = parseInt(hourStr)
    
    // 判断时段
    const isPM = hour >= 12
    // 转换为12小时制：0点转12，12点保持12，其他取模
    const displayHour = hour % 12 || 12
    // 时段标识
    const period = isPM ? 'P.M.' : 'A.M.'
    
    // 拼接最终结果
    return `${displayHour}:${minute} ${period}`
  }
}

3. 模板中使用计算属性

替换原来的复杂表达式，同时确保v-time-picker绑定正确：

<v-time-picker v-model="time" format="24hr"></v-time-picker>
<!-- 显示格式化后的时间 -->
<p>{{ formattedTime }}</p>

关键细节说明 #

• 给时间选择器设置format="24hr"，让内部保持24小时制存储，便于我们转换时段
• hour % 12 || 12完美处理0点（返回12）和12点（返回12）的特殊场景
• 计算属性会自动响应time的变化，无需手动监听

简化版模板表达式（不推荐，仅作应急） #

如果不想用计算属性，也可以直接修复模板中的表达式（逻辑较冗余）：

{{ 
  time 
    ? `${(parseInt(time.split(':')[0]) % 12 || 12)}:${time.split(':')[1]} ${parseInt(time.split(':')[0]) >=12 ? 'P.M.' : 'A.M.'}` 
    : ''
}}

内容的提问来源于stack exchange，提问作者Keyboard Corporation