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

Posted

技术标签:

【中文标题】Vue：如何更改每个页面的背景颜色【英文标题】：Vue : how to change background color for each page 【发布时间】：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>

【问题讨论】：

【参考方案1】：

document.body.style.backgroundColor = "&lt;your color here&gt;";

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

【讨论】：

【参考方案2】：

好吧，你可以添加：

.backgroundcolor 
  background-color: lightblue;

到您的 CSS，您所要做的就是将 lightblue 更改为您想要的背景颜色并将 class="backgroundcolor" 添加到第一个标签，例如； &lt;body&gt; 标签可以工作或类似于&lt;body&gt; 标签的东西，&lt;html&gt; 标签也可以工作，但我通常不会在&lt;html&gt; 标签中有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 和 ***.com/questions/53229804/… 其中一个可以工作。

以上是关于Vue：如何更改每个页面的背景颜色的主要内容，如果未能解决你的问题，请参考以下文章

如何更改下拉按钮的背景颜色（Vue Bootstrap）

如何更改 nativescript-vue 中列表项的颜色/背景颜色？

如何更改 HTML 页面的背景颜色以进行打印？

Android如何在每个listview列表项上添加图标并更改文本颜色、背景颜色

如何在不刷新页面的情况下“连续”更改背景颜色[重复]

如何在 UIPageViewController 中更改页面指示器的背景颜色