用vue 写<span>1</span> <span>2<span> 两个span之间用虚线连接

你可以使用CSS伪元素来实现两个 `<span>` 之间的水平虚线连接。以下是一个示例代码：

<template>
  <div>
    <span class="content">1</span>
    <span class="dashed-line"></span>
    <span class="content">2</span>
  </div>
</template>

<style>
.dashed-line {
  border-top: 1px dashed #000;
  display: inline-block;
  width: 100px; /* 设置虚线的长度 */
  height: 0; /* 设置虚线的高度 */
  margin: 0 10px; /* 设置虚线与内容之间的间距 */
}

.content {
  position: relative;
}

.content::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -60px; /* 虚线起点到内容的距离 */
  width: 50px; /* 虚线起点到内容的距离 */
  border-top: 1px dashed #000;
}
</style>

在上面的代码中，我们在两个 `<span>` 标签之间插入了一个空的 `<span>` 标签，并为其添加了一个名为 `dashed-line` 的类。通过CSS样式，我们设置了该类的样式为一条1像素宽的虚线，并设置了虚线的长度、高度以及与内容之间的间距。

为了创建连接效果，我们给每个 `<span>` 标签添加了一个名为 `content` 的类，并使用 `::before` 伪元素来创建虚线。通过调整 `left` 属性，你可以控制虚线起点到内容之间的距离。

这样，你就可以使用Vue编写两个 `<span>` 之间用虚线连接的效果了。