如何仅使用Vue.js更改背景颜色的样式 [英] How to change style of background color using Vue.js only

问题描述

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> 

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

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

推荐答案

将元素绑定到样式对象，如下所示:

bind your element to a style object as follows:

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

在您的数据对象中:

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

您可以检查这我在不影响Vue逻辑的情况下对CSS规则做了几处更改

You could check this i made several changes in your css rules without affecting the Vue logic

这篇关于如何仅使用Vue.js更改背景颜色的样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！