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 {

  border: 2px green;

}

.header {

  border: 2px blue;

}

但这会：

.footer {

  border: 2px solid green;

}

.header {

  border: 2px solid blue;

}