Vue.js만을 사용하여 배경색 스타일을 변경하는 방법

Vue.js만을 사용하여 배경색 스타일을 변경하는 방법

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> 

명령어를 사용하여 vue bind 스타일링을 사용하여 요소의 배경색을 변경하려고 했습니다.v-bind:style='{backgroundColor : color}하지만 CSS의 바디 요소의 여백과 패딩을 제거하려고 했지만 사진에서 보듯이 아직 작동하지 않았습니다. 감사합니다.

#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);
}

다음과 같이 요소를 스타일 객체에 바인딩합니다.

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

데이터 오브젝트:

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

Vue 로직에는 영향을 주지 않고 css 규칙을 몇 가지 변경했습니다.

언급URL : https://stackoverflow.com/questions/53229804/how-to-change-style-of-background-color-using-vue-js-only