亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

Vue:如何更改每個頁面的背景顏色

Vue:如何更改每個頁面的背景顏色

慕的地10843 2023-12-14 14:24:56
我在下面的 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>
查看完整描述

3 回答

?
慕標5832272

TA貢獻1966條經驗 獲得超4個贊

您可以簡單地添加類并在組件的作用域樣式中添加背景顏色:


<template>

  <main class="crypto_bg">

    ...

  </main>

</template>


<style scoped>

 .crypto_bg {

   background: #1d2444;

 }

</style>

但為了更多。就我而言,我有 2 個頁面:加密頁面和股票頁面,由 Header.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>

在模板標簽內,如果是這個獨特的頁面,則更改標題背景顏色,即 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


查看完整回答
反對 回復 2023-12-14
?
慕的地8271018

TA貢獻1796條經驗 獲得超4個贊

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

我相信,您應該可以訪問documentvue 對象中的任何方法。


查看完整回答
反對 回復 2023-12-14
?
慕容3067478

TA貢獻1773條經驗 獲得超3個贊

好吧,你可以添加:

.backgroundcolor?{
??background-color:?lightblue;
}

例如,您所要做的就是更改lightblue為您想要的背景顏色并添加class="backgroundcolor"到第一個標簽;標簽<body>可以工作,或者類似于<body>標簽的東西也<html>可以工作,但我通常不會class=""<html>標簽中使用 。


查看完整回答
反對 回復 2023-12-14
  • 3 回答
  • 0 關注
  • 141 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號