vue2中根据数据里面的开始时间和结束时间，来写出一条横线展示到页面上

在 Vue 2 中，你同样可以使用 template 和 computed 来根据数据中的开始时间和结束时间展示一条横线在页面上。具体实现步骤如下：

1. 在数据中定义开始时间和结束时间：

data() {
  return {
    startTime: new Date("2021-09-01 09:00:00"),
    endTime: new Date("2021-09-01 18:00:00")
  }
}

2. 在模板中使用 canvas 元素来展示横线：

<template>
  <div>
    <canvas ref="canvas" width="500" height="50"></canvas>
  </div>
</template>

3. 在 computed 中计算出横线的长度：

computed: {
  lineWidth() {
    const canvas = this.$refs.canvas;
    const timeDiff = this.endTime - this.startTime;
    return timeDiff / (1000 * 60 * 60 * 9) * canvas.width;
  }
}

4. 在 mounted 中使用 canvas API 画出横线：

mounted: function() {
  const canvas = this.$refs.canvas;
  const ctx = canvas.getContext("2d");
  ctx.beginPath();
  ctx.moveTo(0, canvas.height / 2);
  ctx.lineTo(this.lineWidth, canvas.height / 2);
  ctx.strokeStyle = "red";
  ctx.lineWidth = 5;
  ctx.stroke();
}

这样，就可以根据数据中的开始时间和结束时间展示一条横线在页面上了。注意，在 mounted 中使用 canvas API 画出横线，因为 canvas 元素需要渲染到页面上才能获取宽度。