Vue如何实现时长累加并按XhXXm格式进行显示

核心思路确认 #

你提到的先统一用分钟作为数值存储、再拆分格式用于UI展示的思路完全正确，是这类时间累加需求的标准实现方式，避免多单位混合计算出错，后续扩展也更灵活。

修改步骤 #

1. 调整存储变量
   把原来存储格式化字符串的timeSpent改成存储总分钟数的数字类型变量，初始值为0。
2. 修改累加方法
   点击时不再直接赋值，而是把传入的分钟数累加到总时长变量上。
3. 新增格式化计算属性
   通过Vue计算属性自动把总分钟数转换成你需要的XhXXm格式，不用手动维护展示字符串。

完整修改后代码 #

模板部分（新增展示位示例） #

<!-- 时长展示位 -->
<div>总时长：{{ formattedTime }}</div>

<ul class="time-list">
   <li style="margin-right:2px;"><a href="#" @click.prevent="addTime(15)">+15m</a></li><span>|</span>
   <li style="margin-right:2px;"><a href="#" @click.prevent="addTime(30)">+30m</a></li><span>|</span>
   <li style="margin-right:2px;"><a href="#" @click.prevent="addTime(45)">+45m</a></li><span>|</span>
   <li style="margin-right:2px;"><a href="#" @click.prevent="addTime(60)">+1h</a></li><span>|</span>
   <li><a href="#">---</a></li>
</ul>

注：加了.prevent修饰符阻止a标签默认跳转行为

逻辑部分 #

export default {
  data () {
    return {
        // 存储总分钟数，数字类型方便计算
        totalMinutes: 0,
    }
  },
  computed: {
    formattedTime() {
      const hours = Math.floor(this.totalMinutes / 60)
      const minutes = this.totalMinutes % 60
      // 按需拼接格式
      if (hours === 0) {
        return `${minutes}m`
      }
      // 分钟小于10自动补0，比如1h05m
      return `${hours}h${minutes.toString().padStart(2, '0')}m`
    }
  },
  methods: {
    addTime(time){
       this.totalMinutes += time
       // 如果需要加时长上限，比如最多8小时，可以在这里加判断
       // this.totalMinutes = Math.min(this.totalMinutes, 8*60)
    },
  }
}

扩展说明 #

如果需要重置时长，只要新增一个方法把totalMinutes设为0即可，计算属性会自动更新展示内容。

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