如何在 vuejs 中删除 v-app-bar 下的空间？答案

【问题标题】：How can I remove the space under v-app-bar in vuejs?如何在 vuejs 中删除 v-app-bar 下的空间？
【发布时间】：2021-04-23 21:28:28
【问题描述】：

如何删除 v-app-bar 下的空间？

标题部分 User_Header.vue

<template>
<v-app id="user_header">
    <v-app-bar app color="#8a0303" dark>
        <h1>this is app bar</h1>
    </v-app-bar>
</v-app>

</template>

<script>
export default {
    name: "User_Header"
}
</script>

<style>
</style>

我称之为标题的部分 User_Dashboard.vue

<template>
  <v-app id="user_dashboard">
      <User_Header />
      <div>
          <h1>Test</h1>
      </div>
 </v-app>
</template>

<script>
import User_Header from '../components/layout/User_Header'
export default {
    name: "User_Dashboard",
    components: {
        User_Header
    }
}
</script>

<style>
</style>

我的结果差距很大

result

【问题讨论】：

你的意思是......你想删除左边的填充？
@NileshPatel 我想删除栏和内容之一之间的空间。我不知道为什么那里有这么多空白空间，即使我从来没有写过任何代码。

标签： html css vue.js vue-component vuetify.js

【解决方案1】：

我在 Vuetify 文档中找到了 this，当 v-app 应该只在应用程序中渲染一次时，您正在渲染两次。

不要将标题包装在<v-app> 标签中，而是用 div 标签替换它们。

<template>
<div id="user_header">
    <v-app-bar app color="#8a0303" dark>
        <h1>this is app bar</h1>
    </v-app-bar>
</div>
</template>

【讨论】：