web-dev-qa-db-fra.com

comment changer la couleur d'arrière-plan en utilisant vue js uniquement

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>

j'ai essayé de changer la couleur de fond de l'élément avec avec vue bind styling en utilisant la commande v-bind:style='{backgroundColor : color} mais ce n'est pas à pleine hauteur, même si j'ai essayé de supprimer la marge et le rembourrage de l'élément body sur CSS mais ne fonctionne toujours pas comme vous pouvez le voir sur la photo merci

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

capture d'écran

javascripthtmlcssvue.jsvuejs2
4
user10462904

liez votre élément à un objet de style comme suit:

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

dans votre objet de données:

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

Vous pouvez vérifier ceci j'ai fait plusieurs changements dans vos règles css sans affecter la logique Vue

3
Boussadjra Brahim