时间戳

首页 > 解决方案 > 如何在 vuejs 中删除 v-app-bar 下的空间？

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

问题描述

如何删除 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>

我的结果有很大的差距

结果

标签： htmlcssvue.jsvue-componentvuetify.js

解决方案

我在 Vuetify 文档中发现了这一点，当 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>

推荐阅读