文字下面7px的距离带一条下划线用vue怎么写

在Vue中，可以使用CSS样式来实现文字下面带一条下划线，并设置距离为7px。首先，需要在Vue组件中的style标签内添加以下代码：

<style>
.text-underline {
  position: relative;
  display: inline-block;
}

.text-underline::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -7px;
  width: 100%;
  height: 1px;
  background-color: black;
}
</style>

然后，在模板中使用text-underline类来应用样式：

<template>
  <div>
    <span class="text-underline">文字</span>
  </div>
</template>

这样就可以在文字下方添加一条下划线，并设置距离为7px。