我在下面的 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
慕的地8271018
TA贡献1796条经验 获得超4个赞
document.body.style.backgroundColor = "<your color here>";
我相信，您应该可以访问documentvue 对象中的任何方法。
慕容3067478
TA贡献1773条经验 获得超3个赞
好吧，你可以添加：
.backgroundcolor {
background-color: lightblue;
}例如，您所要做的就是更改lightblue为您想要的背景颜色并添加class="backgroundcolor"到第一个标签；标签<body>可以工作，或者类似于<body>标签的东西也<html>可以工作，但我通常不会class=""在<html>标签中使用 。
添加回答
举报
0/150
提交
取消