博客

可以使用Vue的计算属性来计算上课时间和下课时间之间的差值。这需要将上课时间和下课时间绑定到两个不同的表单输入中，然后使用计算属性将它们作为Date对象解析，并计算出它们之间的时间差

以下是一个例子

<template>
  <div>
    <el-form :model="form">
      <el-form-item label="上课时间">
        <el-date-picker v-model="form.startTime" type="datetime"></el-date-picker>
      </el-form-item>
      <el-form-item label="下课时间">
        <el-date-picker v-model="form.endTime" type="datetime"></el-date-picker>
      </el-form-item>
      <el-form-item label="时长">
        <span>{{ duration }}</span>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        startTime: '',
        endTime: ''
      }
    };
  },
  computed: {
    duration() {
      const start = new Date(this.form.startTime);
      const end = new Date(this.form.endTime);
      const diff = (end.getTime() - start.getTime()) / 1000; // 时间差的秒数
      const hours = Math.floor(diff / 3600); // 小时数
      const minutes = Math.floor((diff - hours * 3600) / 60); // 分钟数
      return `${hours}小时${minutes}分钟`;
    }
  }
};
</script>