Vue : how to change background color for each page
Question
i have code below in Vue js below and i wanted to have different background color in each page, but whenever i do that i should go to App.vue and change color from their for all pages cuz the main container here that includes all pages is App, is there a way to change background color for only one page? thanks in advance
<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>
App.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>
2 answers
solution1
0 2020-12-16 18:28:55
Well, you can add:
.backgroundcolor {
background-color: lightblue;
}
to your CSS, and all you will have to do is change lightblue to the color you want the background to be and add class="backgroundcolor" to the first tag, for example; the <body> tag would work or something similar to the <body> tag also the <html> tag can work for this as well, but I normally you wouldn't have a class="" in the <html> tag.
Also, go here: https://www.w3schools.com/css/css_background.asp for info on pretty much everything to do with coding, but I can say that https://www.w3schools.com is more of a place to go for tutorials on the basics of coding in many different coding languages.
Take a look at these: https://codepen.io/alemesa/pen/YNrBqr and How to change style of background color using Vue.js only one of them could work.
solution2
0 2020-12-16 19:13:31
document.body.style.backgroundColor = "<your color here>";
You should have access to document from within any of your methods in your vue object, I believe.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.