Vue：如何更改每个页面的背景颜色答案

【问题标题】：Vue : how to change background color for each pageVue：如何更改每个页面的背景颜色
【发布时间】：2021-03-27 08:53:08
【问题描述】：

我在下面的 Vue js 中有下面的代码，我想在每个页面中使用不同的背景颜色，但是每当我这样做时，我应该去 App.vue 并从它们的所有页面更改颜色，因为这里的主容器包括所有页面都是应用程序，有没有办法只更改一页的背景颜色？提前致谢

<template>
<b-container>
<h1>  </h1>
<br>
 <br />
<b-row align-v="center">
<b-col cols="8">

    <b-form-group

  
 @submit="postData" method="post">
      <b-form-input
        type="text"
        name="title"
        v-model="posts.title"
        placeholder="Title"
        required
     
      <b-form-input id="question-input"
        type="text"
        name="question"
        v-model="posts.question"
        placeholder="Question"
        required
      /><br /><br />
    
      <b-button class="primary" type="submit">Post</b-button>
    </b-form-group
>
  
</b-col>

</b-row>



 </b-container>
</template>

<script>
export default {
  name: "postComponent",
  data() {
    return {
      posts: {
        title: null,
        question: null,
      },
    };
  },
  methods: {
    postData(e) {
        this.axios.post("",this.posts).then(( result) => {
console.log(result)
        })
        // console.warn(this.posts)
      e.preventDefault();
    },
  },
};
</script>
<style scoped>
@import url('https://fonts.googleapis.com/css2?family=Cairo&displa');
.container{
    padding:50px;
    font-family: 'Cairo', sans-serif;
}
#question-input{
    padding: 35px 10px 90px;
}


</style>

App.vue

<template>


<div class="app">
<Header />
<router-view />
</div>

</template>

<script>
import Header from './components/Header';

export default {
  name: 'App',

  components: {
    Header,
  },

  data: () => ({
    //
  }),
};

</script>
<style>
.app{
  width: auto;

}
</style>

【问题讨论】：

标签： javascript html css vue.js

【解决方案1】：

document.body.style.backgroundColor = "<your color here>";

我相信，您应该可以从您的 vue 对象中的任何方法中访问document。

【讨论】：

【解决方案2】：

好吧，你可以添加：

.backgroundcolor {
  background-color: lightblue;
}

到您的 CSS，您所要做的就是将 lightblue 更改为您想要的背景颜色并将 class="backgroundcolor" 添加到第一个标签，例如； <body> 标签可以工作或类似于<body> 标签的东西，<html> 标签也可以工作，但我通常不会在<html> 标签中有class=""。

另外，去这里：https://www.w3schools.com/css/css_background.asp 了解几乎所有与编码有关的信息，但我可以说https://www.w3schools.com 更像是一个提供许多不同编码语言的编码基础教程的地方。

看看这些：https://codepen.io/alemesa/pen/YNrBqr 和 How to change style of background color using Vue.js only 其中一个可以工作。

【讨论】：

好吧，这可以与普通的 HTML、CSS 项目一起使用，但与 Vue Js 没有因为我解释过父 div 是 App.vue 所以当我更改任何其他页面的颜色时它不适用对于整个页面宽度
@sara97 看看这些：codepen.io/alemesa/pen/YNrBqr 和 stackoverflow.com/questions/53229804/… 其中一个可以工作。