Блог

Я пытаюсь создать простой интерфейс, в котором пользователь может увеличивать время, используя ряд опций, доступных в списке. Я работаю над тем, чтобы установить переменную vue в качестве времени, на которое они нажимают (т. Е. Если они нажимают » 30 м», то переменная отражает 30

Тем не менее, я хотел бы отобразить переменную в формате XhXXm (таким образом, 2 часа и 30 минут будут составлять 2 часа 30 минут). Хитрость в том, что если они выберут 15 м, затем 30 м, а затем 1 ч, на дисплее должно быть 1ч45 м.

Как бы я изменил это, чтобы на самом деле выполнить правильную итерацию и добавить выбранные элементы? Должен ли я добавить все это в минуты, а затем попытаться разбить его на пользовательский интерфейс?

 <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;
    },
  }
}
 

Начните с интервала времени 0

 return {
    timeSpent: 0,
}
 

настройте свою функцию для добавления нового значения в счетчик

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

и для форматирования вычисляемого свойства

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

наконец, чтобы отобразить

 {{ timeToDisplay }}