Vue - 使用类样式绑定的组件 CSS 类未显示在应用程序中

Question

我刚开始使用 Vue。我首先使用类样式绑定语法。尽管在组件标签中引用了我在 CSS 中定义的页眉和页脚类，但它们并未显示。我似乎不明白为什么。

我尝试将类放入组件中，但它们似乎也没有显示在那里。我有一种感觉，我必须在 Vue 应用程序初始化程序中以某种方式绑定类？

提前致谢！

应用程序.vue

<template>

  <div id="app">

    <div class="container">

        <section>

          <LauchLogo class="header" />

          <LauchSymbol class="footer" />

        </section>

        <section>

          <LauchLogo class="header" />

          <LauchSymbol class="footer" />

        </section>

    </div>

  </div>

</template>

<script>

import { Component, Vue } from "vue-property-decorator";

import LauchLogo from "./components/LauchLogo.vue";

import LauchSymbol from "./components/LauchSymbol.vue";

@Component({

  components: {

    LauchLogo,

    LauchSymbol

  }

})

export default class App extends Vue {

  data() {

    return {

      logo: 'logo',

      symbol: 'symbol'

    }

  }

}

</script>

<style>

#app {

  font-family: Avenir, Helvetica, Arial, sans-serif;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

  text-align: center;

  color: #2c3e50;

}

body {

  height: 100vh;

  overflow: hidden;

}

* {

  margin: 0;

  padding: 0;

}

.container {

  width: 100%;

  height: 100%;

  overflow-y: scroll;

  scroll-behavior: smooth;

  scroll-snap-type: y mandatory;

}

section {

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: space-evenly;

  width: 100vw;

  height: 100vh;

  scroll-snap-align: center;

}

.footer {

  border: 2px green;

}

.header {

  border: 2px blue;

}

</style>

Answer 1

您可能只需要向 CSS 添加边框样式属性。您在此处添加的内容不会显示边框：.footer {&nbsp; border: 2px green;}.header {&nbsp; border: 2px blue;}但这会：.footer {&nbsp; border: 2px solid green;}.header {&nbsp; border: 2px solid blue;}