时间戳

首页 > 解决方案 > Vue，以“xhxxm”格式添加/增加时间

javascript - Vue，以“xhxxm”格式添加/增加时间

问题描述

我正在尝试制作一个简单的界面，用户可以使用列表中的许多可用选项来增加时间。我可以将 vue 变量设置为他们单击的时间（即，如果他们单击“+30m”，则该变量反映 30

但是，我想以 XhXXm 的格式显示变量（所以 2 小时 30 分钟将是 2h30m）。诀窍是，如果他们选择 15m，然后是 30m，然后是 1h，则显示应为 1h45m。

我将如何更改它以实际正确迭代并添加选择？我应该将它全部添加到几分钟内，然后尝试为 UI 分解它吗？

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

export default {
  data () {
    return {
        timeSpent: '0m',
    }
  },

  methods: {
    addTime(time){
       this.timeSpent = time;
    },
  }
}

标签： javascriptvue.js

解决方案

从 0 开始的 timeSpent

return {
    timeSpent: 0,
}

设置您的功能以将新值添加到您的计数器

addTime(time){
    this.timeSpent += time;
},

并格式化计算属性

computed: {
    timeToDisplay(){
        return `${Math.floor(this.timeSpent/60)}h${this.timeSpent % 60}m`;
    },
}

终于要展示了

{{ timeToDisplay }}

推荐阅读