javascript 如何仅使用 Vue.js 更改背景颜色的样式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/53229804/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to change style of background color using Vue.js only
提问by Boussadjra Brahim
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
我尝试使用 vue 绑定样式使用命令更改元素的背景颜色， v-bind:style='{backgroundColor : color}但它不是全高，即使我尝试删除 CSS 上 body 元素的边距和填充，但仍然无法正常工作，如您所见图片谢谢
#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);
}回答by Boussadjra Brahim
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 thisi made several changes in your css rules without affecting the Vue logic
你可以检查一下我在你的 css 规则中做了几处更改而不影响 Vue 逻辑
