vue+elementui的表单中,有一个上课时间和下课时间,我要把他们俩做差,应该怎么实现

可以使用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>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

起名时在学Aiifox

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值