删除 Vue.js 和 Vuetify 中的下划线链接按钮答案

【问题标题】：Remove underline link button in Vue.js and Vuetify删除 Vue.js 和 Vuetify 中的下划线链接按钮
【发布时间】：2020-11-01 15:25:17
【问题描述】：

我使用 Vue.js 作为前端，我使用 Vuetify 作为框架，我使用如下按钮：

<v-btn
              class="ma-2"
              outlined
              color="success"
              width="150px"
              to="/user"
          >
            <div class="font">
              Search
            </div>
          </v-btn>

我不想在鼠标悬停时加下划线我应该怎么办？？在我添加到=“/用户”之前没关系我这样做并将其设置为类

.font{
    text-decoration: none;
}

但不工作

不想将它用作类

display: inline-block;text-decoration:none;

【问题讨论】：

你能解决你的问题吗？默认情况下，AFAIK v-btn 不应在您的文本下划线
@maxshty 谢谢，但我真的真的在多次搜索后意外找到了解决方案，应该将其设置为 style style="text-decoration: none; color: inherit;"

标签： vue.js vuetify.js underline

【解决方案1】：

如果您想删除所有链接上的下划线，只需将其写入您的主 css 文件：

a {
  text-decoration: none;
}

如果您只想为一组按钮删除它，请为这些按钮创建一个类，例如btn-link。然后你可以这样：

.btn-link a{
  text-decoration: none;
}

【讨论】：

【解决方案2】：

使用它

<v-btn
              class="ma-2"
              outlined
              color="success"
              to="/user"
              style="text-decoration: none; color: inherit;"
          >
            <div class="font-button-search">
              جست و جو
            </div>
          </v-btn>

【讨论】：