3 回答

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

TA貢獻1796條經驗 獲得超4個贊
document.body.style.backgroundColor = "<your color here>";
我相信,您應該可以訪問document
vue 對象中的任何方法。

TA貢獻1773條經驗 獲得超3個贊
好吧,你可以添加:
.backgroundcolor?{ ??background-color:?lightblue; }
例如,您所要做的就是更改lightblue
為您想要的背景顏色并添加class="backgroundcolor"
到第一個標簽;標簽<body>
可以工作,或者類似于<body>
標簽的東西也<html>
可以工作,但我通常不會class=""
在<html>
標簽中使用 。
添加回答
舉報