javascript - 使用vue js动态计算耗时

Question

我正在尝试显示从开始时间起动态耗时

<template>
  <div class="dashboard-editor-container">

      <div class="wrapper__body">

          <el-row :gutter="30">
             <el-col v-for="item in options" :key="item.value" align="middle" :xs="24" :sm="24" :md="24" :lg="4" :xl="24" style="margin-bottom:10px">

                 <el-button type="primary"  style="width: 180px;height:120px ;"  >{{item.label}} - {{getTimer(item.FechaHora)}}</el-button>
             </el-col>

          </el-row>


      </div>



  </div>
</template>

js

 <script>
    export default {
      data() {


       return {
            options: [{
              value: '01',
              label: 'Room 1',
              FechaHoraInicio:'2020-02-18T18:17:53.56',
              FechaHoraSalida:'2020-02-18T18:17:53.56',
            }, {
              value: '02',
              label: 'Room 2',
              FechaHoraStartTime:'2020-02-18T18:17:53.56',
              FechaHoraSalida:'2020-02-18T18:17:53.56',
            }, {
              value: '03',
              label: 'Room 2',
              FechaHoraStartTime:'2020-02-18T18:17:53.56',
              FechaHoraSalida:'2020-02-18T18:17:53.56',
            },
    }
    }
    },
 computed: {

    getTimer : function(FechaHoraInicio) {

       setInterval(function(){ 
           return  Date.now()-new Date(FechaHoraInicio)
       }, 3000);

    },
  },
    }

    </script>

按钮是动态创建的，并且有一个开始时间，之后我想动态计算

我动态创建每个按钮及其各自的开始时间，并且我需要动态地将其作为时钟显示耗时，用开始时间减去当前时间

自房间出租以来已经过去的时间

Answer 1

我希望这对你有用:

new Vue({
  el: "#app",
  data() {
    return {
      options: [
        {
          value: "01",
          label: "Room 1",
          FechaHoraStartTime: "2020-02-18T18:17:53.56",
          FechaHoraSalida: "2020-02-18T18:17:53.56"
        },
        {
          value: "02",
          label: "Room 2",
          FechaHoraStartTime: "2020-02-18T18:17:53.56",
          FechaHoraSalida: "2020-02-18T18:17:53.56"
        },
        {
          value: "03",
          label: "Room 2",
          FechaHoraStartTime: "2020-02-18T18:17:53.56",
          FechaHoraSalida: "2020-02-18T18:17:53.56"
        }
      ],
      intervalEvents: []
    };
  },

  created() {
    this.setTimers();
  },
  
  beforeDestroy() {
    this.intervalEvents.map(intervalEvent => {
      clearInterval(intervalEvent)
    })
  },

  methods: {
    setTimers() {
      this.options = this.options.map(option => ({
        ...option,
        elapsed: "",
        startTimeAsDate: new Date(option.FechaHoraStartTime)
      }));

      this.options.map(option => {
        const event = setInterval(() => {
          option.elapsed = new Date(new Date().getTime() - option.startTimeAsDate).toLocaleTimeString();
        }, 1000);
        
        this.intervalEvents.push(event)
      });
    }
  }
});

<link
  rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

<div id="app">
  <div class="dashboard-editor-container">
    <div class="wrapper__body">
      <el-row :gutter="30">
        <el-col
          v-for="(option, index) in options"
          :key="index"
          align="middle"
          :xs="24" :sm="24" :md="24" :lg="4" :xl="24"
          style="margin-bottom:10px"
        >
          <el-button type="primary" style="width:180px;height:120px ;">
          {{option.label}} {{ option.elapsed }}
          </el-button>
        </el-col>
      </el-row>
    </div>
  </div>
</div>