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

问题描述

我将Vue.js用于前端，并将Vuetify作为框架，使用如下所示的按钮：

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

，当鼠标悬停在其上时，我不希望出现下划线 我该怎么办？？在我添加到=“ / user”之前还可以 我这样做，并将其设置为课程

.font{
    text-decoration: none;
}

但不起作用

并且不想将其用作类

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

解决方法

我要删除所有链接的下划线，只需将其写在主CSS文件中即可：

a {
  text-decoration: none;
}

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

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

,

使用

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