Heim > Artikel > Web-Frontend > So ändern Sie die Hintergrundfarbe in VueJS
So ändern Sie die Hintergrundfarbe in VueJS
- 藏色散人Original
- 2021-09-20 15:14:194810Durchsuche
So ändern Sie die Hintergrundfarbe von VueJS: 1. Führen Sie einen gemeinsamen CSS-Stil in index.html ein. 2. Ändern Sie die Hintergrundfarbe einer einzelnen Komponente, indem Sie den Code „beforeCreate () {...}“ hinzufügen.
Die Betriebsumgebung dieses Artikels: Windows7-System, Vue2.5.17-Version, Dell G3-Computer.
Wie ändere ich die Hintergrundfarbe in VueJS?
Vue implementiert den Vorgang zum Ändern der Hintergrundfarbe
wie folgt:
<!-- 分页上下页改变背景图效果 -->
<!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>Zusätzliches Wissen: vue legt die Hintergrundfarbe einheitlich fest und ändert die Hintergrundfarbe einer bestimmten Seite individuell
Manchmal stoßen wir auf das Problem, die Hintergrundfüllfarbe einer Komponente einzeln zu ändern, und wir haben einen gemeinsamen CSS-Stil in index.html eingeführt (die Hintergrundfarbe wird im Körper festgelegt, da eine einzelne Komponente keinen Körper hat). Tag müssen wir eine einzelne Komponente ändern. Um die Hintergrundfarbe der Komponente festzulegen, fügen Sie einfach den folgenden Code hinzu.
beforeCreate () {
document.querySelector('body').setAttribute('style', 'margin: 0 auto; width: 100%; max-width: 750px;min-width: 300px; background:#171b2a; overflow-x: hidden;height: 100%;');
}Empfohlenes Lernen: „vue-Tutorial“
Das obige ist der detaillierte Inhalt vonSo ändern Sie die Hintergrundfarbe in VueJS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!