猿问

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

我在下面的 Vue js 中有代码，我想在每个页面中有不同的背景颜色，但每当我这样做时，我应该转到 App.vue 并更改所有页面的颜色，因为这里包含所有页面的主容器是App，有没有办法只改变一页的背景颜色？提前致谢

<template>

<b-container>

<h1> Ask Question </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>



慕的地10843
浏览 86回答 3
3回答

慕标5832272

您可以简单地添加类并在组件的作用域样式中添加背景颜色：<template>&nbsp; <main class="crypto_bg">&nbsp; &nbsp; ...&nbsp; </main></template><style scoped>&nbsp;.crypto_bg {&nbsp; &nbsp;background: #1d2444;&nbsp;}</style>但为了更多。就我而言，我有 2 个页面：加密页面和股票页面，由 Header.vue 中的切换器控制。库存页面就像主页/默认页面，我的独特页面具有不同的标题和正文背景，这是加密页面。应用程序视图：<template>&nbsp; <div id="app">&nbsp; &nbsp; <Header @stock="showStockPlatform" @crypto="showCryptoPlatform" />&nbsp; &nbsp; <Main v-if="stockMainShown" />&nbsp; &nbsp; <CryptoMain v-if="cryptoMainShown" />&nbsp; &nbsp; <router-view />&nbsp; </div></template><script>&nbsp; data() {&nbsp; &nbsp; return {&nbsp; &nbsp; &nbsp; &nbsp; stockMainShown: true,&nbsp; &nbsp; &nbsp; &nbsp; cryptoMainShown: false,&nbsp; &nbsp; };&nbsp; },&nbsp; methods: {&nbsp; &nbsp; showStockPlatform: function (platform) {&nbsp; &nbsp; &nbsp; &nbsp; this.stockMainShown = platform;&nbsp; &nbsp; },&nbsp; &nbsp; showCryptoPlatform: function (platform) {&nbsp; &nbsp; &nbsp; &nbsp; this.cryptoMainShown = platform;&nbsp; &nbsp; },&nbsp; },</script>在我的 Header.vue 中，我要切换以显示这个独特的页面/组件：从 Header.vue 发出一个事件来更新 App.vue，将此唯一页面的变量设置为 true，例如 stockMainShown: true、cryptoMainShown: false，如上所示。<script>&nbsp;export default {&nbsp; data() {&nbsp; &nbsp; return {&nbsp; &nbsp; &nbsp; &nbsp; stockPlat: true,&nbsp; &nbsp; };&nbsp; },&nbsp; methods: {&nbsp; &nbsp; showPlatform(platform) {&nbsp; &nbsp; &nbsp; &nbsp; if (platform.toLowerCase() == "stocks") {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.$emit("stock", true);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.$emit("crypto", false);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.stockPlat = true;&nbsp; &nbsp; &nbsp; &nbsp; } else if (platform.toLowerCase() == "crypto") {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.$emit("stock", false);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.$emit("crypto", true);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.stockPlat = !this.stockPlat;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; },&nbsp; },&nbsp;};</script>在模板标签内，如果是这个独特的页面，则更改标题背景颜色，即 stockPlat 为 false 的情况，如下所示<template>&nbsp; <div :class="[stockPlat ? 'bgDark' : 'bgBlue']">&nbsp; &nbsp; ...&nbsp; </div></template>在 Style 标签内，使用它<style>&nbsp; .bgDark {&nbsp; &nbsp; background-color: black;&nbsp; }&nbsp; .bgBlue {&nbsp; &nbsp; background-color: blue;&nbsp; }</style>参考：&nbsp;https://v2.vuejs.org/v2/guide/class-and-style.html&nbsp;https://v2.vuejs.org/v2/guide/components-custom-events.html
0

慕的地8271018

document.body.style.backgroundColor = "<your color here>";我相信，您应该可以访问documentvue 对象中的任何方法。
0

慕容3067478

好吧，你可以添加：.backgroundcolor {   background-color: lightblue; }例如，您所要做的就是更改lightblue为您想要的背景颜色并添加class="backgroundcolor"到第一个标签；标签<body>可以工作，或者类似于<body>标签的东西也<html>可以工作，但我通常不会class=""在<html>标签中使用 。
0
随时随地看视频慕课网APP

相关分类

JavaScript
我要回答