Shulou(Shulou.com)06/03 Report--

Vuejs how to modify the background color, many novices are not very clear about this, in order to help you solve this problem, the following editor will explain for you in detail, people with this need can come to learn, I hope you can gain something.

Vuejs methods to modify the background color: 1, the introduction of a common css style in index.html; 2, by adding "beforeCreate () {...}" code to modify the background color of a single component.

This article operating environment: windows7 system, vue2.5.17 version, Dell G3 computer.

How does vuejs modify the background color?

Vue implements background color change operation

As follows:

.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: 500pxposiheight: 500px } previous page {{n}} next page

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

Custom instructions implement random background # app {width: 999px; height: 999px;} custom instructions

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: specify bind dom element h4dom object / / bindings: custom instruction object / / vchangeMueller background = "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 ("bind successfully");}, update: function (el, bindings) {console.log ('updated data'); 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}) `}, / / Update data}})

Supplementary knowledge: vue uniformly sets the background color and changes the background color of a page separately.

Sometimes we encounter changing the background fill color of a component separately, and we have introduced a common css style in index.html (the background color is set in body). Because a single component does not have a body tag, you only need to add the following code to change the background color of a single component.

BeforeCreate () {document.querySelector ('body'). SetAttribute (' style', 'margin: 0 auto; width: 100%; max-width: 750pxpolitical min width: 300px; background:#171b2a; overflow-x: hidden;height: 100% X');} is it helpful for you to read the above content? If you want to know more about the relevant knowledge or read more related articles, please follow the industry information channel, thank you for your support.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.