如何仅使用 Vue.js 更改背景颜色的样式

Question

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/>'
})

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/>'
})

我尝试使用该命令使用 vue 绑定样式更改元素的背景颜色， v-bind:style='{backgroundColor : color} 但它不是全高，即使我尝试删除 CSS 上 body 元素的边距和填充，但仍然无法正常工作，如您所见图片谢谢

<template>
  <div id="app">
    <webpage></webpage>
  </div>
</template>

<script>

import webpage from "./components/webpage"


export default {
  name: 'app',
  components : {
    webpage
  }
}
</script>

<style>

</style> 

Answer 1

将您的元素绑定到样式对象，如下所示：

  <div :style="myStyle" id="wrapper">

在您的数据对象中：

     data(){
       return{
         myStyle:{
            backgroundColor:"#16a085" 
            }
          ...
           }
         }

你可以检查一下我在你的 css 规则中做了几处更改而不影响 Vue 逻辑