gpt4 book ai didi

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

转载 作者:搜寻专家 更新时间:2023-10-30 22:46:47 24 4
gpt4 key购买 nike

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 绑定(bind)样式的元素的背景颜色但它不是全高,即使我尝试删除 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);
}

screenshot

最佳答案

按如下方式将您的元素绑定(bind)到样式对象:

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

在你的数据对象中:

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

你可以查看 this我在不影响 Vue 逻辑的情况下对您的 css 规则进行了一些更改

关于css - 如何仅使用 Vue.js 更改背景颜色的样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53229804/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com