vuejs如何修改背景色，很多新手对此不是很清楚，为了帮助大家解决这个难题，下面小编将为大家详细讲解，有这方面需求的人可以来学习下，希望你能有所收获。

成都创新互联主营兴安盟网站建设的网络公司,主营网站建设方案,App定制开发,兴安盟h5重庆小程序开发搭建,兴安盟网站营销推广欢迎兴安盟等地区企业咨询

vuejs修改背景色的方法：1、在index.html中引入公用的css样式；2、通过添加“beforeCreate () {...}”代码修改单个组件的背景色即可。

本文操作环境：windows7系统、vue2.5.17版、Dell G3电脑。

vuejs怎么修改背景色？

Vue实现背景更换颜色操作

如下所示：

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


	
		
			
 
				上一页 
			
			
				{{n}}
			
			

				下一页 
			
		
	

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

 
 
 
  #app{
  width: 999px;
  height: 999px;
  }
 


 
自定义指令
 
 
 
 
 

 
 

补充知识：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%;');
}

看完上述内容是否对您有帮助呢？如果还想对相关知识有进一步的了解或阅读更多相关文章，请关注创新互联行业资讯频道，感谢您对创新互联的支持。

分享文章：vuejs如何修改背景色
本文地址：http://scyingshan.cn/article/pjepco.html