时间戳

首页 > 解决方案 > Vue：如何更改每个页面的背景颜色

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

问题描述

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

<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>

应用程序.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>

标签： javascripthtmlcssvue.js

解决方案

您可以简单地添加类并在组件的作用域样式中添加背景颜色：

<template>
  <main class="crypto_bg">
    ...
  </main>
</template>

<style scoped>
 .crypto_bg {
   background: #1d2444;
 }
</style>

但更多。就我而言，我有 2 个页面：加密和股票，由 Header.vue 中的切换器控制。股票页面就像主页/默认页面，我的独特页面具有不同的标题和正文背景是加密页面。

应用程序.vue：

<template>
  <div id="app">
    <Header @stock="showStockPlatform" @crypto="showCryptoPlatform" />

    <Main v-if="stockMainShown" />

    <CryptoMain v-if="cryptoMainShown" />

    <router-view />
  </div>
</template>

<script>
  data() {
    return {
        stockMainShown: true,
        cryptoMainShown: false,
    };
  },
  methods: {
    showStockPlatform: function (platform) {
        this.stockMainShown = platform;
    },

    showCryptoPlatform: function (platform) {
        this.cryptoMainShown = platform;
    },
  },
</script>

在我的 Header.vue 中，我正在切换以显示这个独特的页面/组件：

从 Header.vue 发出一个事件来更新 App.vue，将这个唯一页面的变量设置为 true，例如 stockMainShown: true, cryptoMainShown: false，如上所示。

<script>
 export default {
  data() {
    return {
        stockPlat: true,
    };
  },
  methods: {
    showPlatform(platform) {
        if (platform.toLowerCase() == "stocks") {

            this.$emit("stock", true);
            this.$emit("crypto", false);

            this.stockPlat = true;
        } else if (platform.toLowerCase() == "crypto") {

            this.$emit("stock", false);
            this.$emit("crypto", true);

            this.stockPlat = !this.stockPlat;
        }
    },
  },
 };
</script>

在 Template 标签内，如果是这个唯一页面，则更改标题背景颜色，即 stockPlat 为 false 的地方，如下所示

<template>
  <div :class="[stockPlat ? 'bgDark' : 'bgBlue']">
    ...
  </div>
</template>

在 Style 标签内，使用这个

<style>
  .bgDark {
    background-color: black;
  }
  .bgBlue {
    background-color: blue;
  }
</style>

参考： https ://v2.vuejs.org/v2/guide/class-and-style.html https://v2.vuejs.org/v2/guide/components-custom-events.html

推荐阅读