在Vuetify中使用v-app-bar组件时底部边框无法显示如何解决？

问题原因 #

• 你之前给.v-toolbar__content加边框不生效，是因为遗漏了border-style属性，CSS默认border-style为none，所以即使设置了宽度和颜色也不会显示边框。
• 用v-divider出现间距的原因是v-app-bar内部默认有上下内边距，同时你嵌套的v-col也自带默认padding，导致分割线无法贴合底部。

解决方案1：直接通过CSS设置底部边框（推荐） #

只需要补全border样式即可，根据你的样式是否加scoped选择对应写法：

<template>
    <v-app-bar
    color="black"
    app
    >
    <v-app-bar-nav-icon class="d-lg-none"></v-app-bar-nav-icon>
    <v-spacer />
    <v-app-bar-title
      class="text-no-wrap text-h3"
      style="width: fit-content;"
    >
      Title
    </v-app-bar-title>
    <v-spacer />
    </v-app-bar>
</template>

<!-- 非scoped样式写法 -->
<style>
.v-toolbar__content{
    border-bottom: 2px solid white; /* 一次性设置宽度、样式、颜色 */
}
</style>

<!-- 如果是scoped样式，需要用深度选择器 -->
<style scoped>
:deep(.v-toolbar__content) {
    border-bottom: 2px solid white;
}
</style>

解决方案2：调整v-divider实现 #

如果要继续用v-divider组件，需要去掉多余的嵌套容器间距，同时自定义divider的样式：

<v-app-bar
  color="black"
  app
  class="pb-0" <!-- 去掉app-bar默认底部内边距 -->
>
  <v-row class="ma-0 w-100">
    <v-app-bar-nav-icon class="d-lg-none"></v-app-bar-nav-icon>
    <v-spacer />
    <v-app-bar-title
      class="text-no-wrap text-h3"
      style="width: fit-content;"
    >
      Title
    </v-app-bar-title>
    <v-spacer />
    <v-divider class="bg-white" style="height: 2px; width: 100%"></v-divider>
  </v-row>
</v-app-bar>

内容的提问来源于stack exchange，提问作者MetinOnt