vuejs修改背景色的方法：1、在index.html中引入公用的css样式；2、通过添加“beforecreate () {...}”代码修改单个组件的背景色即可。
本文操作环境：windows7系统、vue2.5.17版、dell g3电脑。
vuejs怎么修改背景色？
vue实现背景更换颜色操作
如下所示：
<!-- 分页上下页改变背景图效果 --><!doctype html><html><head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title></title> <link rel="stylesheet" href=""> <script type="text/javascript" src="../node_modules/vue/dist/vue.js"></script> <style type="text/css" media="screen"> .page{ list-style: none; } .page>li{ float: left; margin-left: 10px; } .page>li>a{ text-decoration: none; } .active{ color: red; text-decoration: display; } p{ width: 500px;height: 500px; } </style></head><body > <p id="app" v-bind:style="{backgroundcolor:bgcol}"> <ul class="page"> <li> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" v-on:click="decrease" >上一页</a> </li> <li v-for="n in totalpage"> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" v-bind:class="n==activenum?'active':''">{{n}}</a> </li> <li> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click="increase">下一页</a> </li> </ul> </p> <script type="text/javascript"> var exampledata={ //msg:"hello vue", bgcol:"#db8623ff", totalpage:10, activenum:3, } var app = new vue({ el:'#app', data:exampledata, methods:{ decrease:function(){ this.activenum==1?'':this.activenum-=1; this.bgcol=this.getrandom(); }, increase:function(){ this.activenum==10?'':this.activenum+=1; this.bgcol=this.getrandom(); }, getrandom:function(){ var r=math.floor(math.random()*256); var g=math.floor(math.random()*256); var b=math.floor(math.random()*256); var a=math.random().tofixed(1); return `rgba(${r},${g},${b},${a})` } } }) </script></body></html>
<!doctype html><html><head lang="en"> <meta charset="utf-8"> <title>自定义指令实现随机背景</title> <style type="text/css" media="screen"> #app{ width: 999px; height: 999px; } </style></head><body> <h3>自定义指令</h3> <p id="app" v-change-background-color="mybgcolor"> <h3 > <input type="text" v-model="mybgcolor" placeholder="请输入16进制颜色"> </h3> </p> <script src="../node_modules//vue/dist/vue.js"></script> <script> var exampledata = { mybgcolor: "#5fca34", }; new vue({ el: "#app", data: exampledata, methods:{ getrandom:function(){ var r=math.floor(math.random()*256); var g=math.floor(math.random()*256); var b=math.floor(math.random()*256); var a=math.random().tofixed(1); return `rgba(${r},${g},${b},${b})` } }, directives: { changebackgroundcolor: { bind: function(el, bindings) { //el:指定绑定dom元素 h3dom对象 //bindings:自定义指令对象 //v-change-background-color="mybgcolor" //bindings.value;=="#ff0000" var r=math.floor(math.random()*256); var g=math.floor(math.random()*256); var b=math.floor(math.random()*256); var a=math.random().tofixed(1); el.style.backgroundcolor =`rgba(${r},${g},${b},${a})`; console.log("绑定成功"); }, update: function(el, bindings) { console.log('已更新数据'); var r=math.floor(math.random()*256); var g=math.floor(math.random()*256); var b=math.floor(math.random()*256); var a=math.random().tofixed(1); el.style.background = `rgba(${r},${g},${b},${a})` }, //更新数据 } } }); </script></body></html>
补充知识：vue统一设置了背景色，单独改变某一页的背景色
有时我们会遇到单独改变某个组件的背景填充色，而我们已经在index.html中引入了公用的css样式（body中设置了背景色），由于单个组件没有body标签，于是要修改单个组件的背景色只需添加如下代码即可。
beforecreate () { document.queryselector('body').setattribute('style', 'margin: 0 auto; width: 100%; max-width: 750px;min-width: 300px; background:#171b2a; overflow-x: hidden;height: 100%;');}
推荐学习：《vue教程》
以上就是vuejs怎么修改背景色的详细内容。