How to change style of background color using Vue.js only
57,951
bind your element to a style object as follows:
<div :style="myStyle" id="wrapper">
in your data object :
data(){
return{
myStyle:{
backgroundColor:"#16a085"
}
...
}
}
You could check this i made several changes in your css rules without affecting the Vue logic
Author by
Admin
Updated on July 05, 2022Comments
-
Admin almost 2 years
import Vue from 'vue' import App from './App' import BootstrapVue from 'bootstrap-vue' import 'bootstrap/dist/css/bootstrap.css' import 'bootstrap-vue/dist/bootstrap-vue.css' Vue.config.productionTip = false Vue.use(BootstrapVue); /* eslint-disable no-new */ new Vue({ el: '#app', components: { App }, template: '<App/>' })
<template> <div id="app"> <webpage></webpage> </div> </template> <script> import webpage from "./components/webpage" export default { name: 'app', components : { webpage } } </script> <style> </style>
i tried to change the background color of element with with vue bind styling using the command
v-bind:style='{backgroundColor : color}
but its not at full height, even though i tried to remove the margin and the padding for the body element on CSS but still not working as u can see on the pic thanks#wrapper{ width: 650px ; height: auto; background-color: rgb(198, 241, 200); margin: 0 auto; margin-top: 200px; border-radius: 10px; } html, body { margin: 0; padding: 0; background-color:rgb(250, 28, 65); }