vue中根据数据里面的开始时间和结束时间在页面上展示一条长横线

你可以使用 Vue 中的 `v-for` 指令和 `style` 绑定来根据数据里的开始时间和结束时间展示一条长横线。假设你的数据如下：

data: {
  lines: [
    {id: 1, start: '09:00', end: '12:00'},
    {id: 2, start: '13:00', end: '15:00'},
    {id: 3, start: '17:00', end: '18:00'}
  ]
}

其中，每个对象表示一条线，包括 id、start 和 end 三个属性。接下来，你可以在模板中使用 `v-for` 指令遍历数据，为每条线设置样式，并展示出来。代码如下：

<div v-for="line in lines" :key="line.id" class="line" :style="{ left: getLeft(line.start), width: getWidth(line.start, line.end) }"></div>

在这个例子中，我们为每条线创建一个 `div` 元素，并使用 `v-for` 指令遍历数据中的每个对象。在 `div` 元素上使用 `class` 属性设置样式，并使用 `style` 绑定动态设置元素的样式。具体来说，我们通过 `getLeft` 方法获取线条的起点位置，通过 `getWidth` 方法获取线条的长度，然后将这两个值设置为 `left` 和 `width` 样式。这里的 `getLeft` 和 `getWidth` 方法需要你自己实现，可以使用 JavaScript 中的 Date 对象来处理时间，计算出相应的位置和长度。

最后，你需要在 CSS 中设置 `.line` 类的样式，包括高度、边框、背景颜色等。代码如下：

.line {
  position: absolute;
  top: 50px;
  height: 2px;
  border-radius: 2px;
  background-color: #000;
}

在这个例子中，我们将每条线的高度设置为 2px，背景颜色为黑色，边框为圆角矩形，位置为绝对定位。你可以根据自己的需要来调整这些样式，以展示出符合你要求的长横线。