So ändern Sie die Hintergrundfarbe in VueJS
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!
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
Einige Tipps zum Entwickeln von Android-Anwendungen mit Vue.js und der Kotlin-Sprache
Jul 31, 2023 pm 02:17 PM
Einige Tipps für die Entwicklung von Android-Anwendungen mit Vue.js und der Kotlin-Sprache. Mit der Beliebtheit mobiler Anwendungen und dem kontinuierlichen Wachstum der Benutzeranforderungen hat die Entwicklung von Android-Anwendungen bei Entwicklern immer mehr Aufmerksamkeit auf sich gezogen. Bei der Entwicklung von Android-Apps ist die Wahl des richtigen Technologie-Stacks entscheidend. In den letzten Jahren haben sich die Sprachen Vue.js und Kotlin nach und nach zu einer beliebten Wahl für die Entwicklung von Android-Anwendungen entwickelt. In diesem Artikel werden einige Techniken zum Entwickeln von Android-Anwendungen mit Vue.js und der Kotlin-Sprache vorgestellt und entsprechende Codebeispiele gegeben. 1. Richten Sie zu Beginn die Entwicklungsumgebung ein
Einige Tipps zum Entwickeln von Datenvisualisierungsanwendungen mit Vue.js und Python
Jul 31, 2023 pm 07:53 PM
Einige Tipps für die Entwicklung von Datenvisualisierungsanwendungen mit Vue.js und Python Einführung: Mit dem Aufkommen des Big-Data-Zeitalters ist die Datenvisualisierung zu einer wichtigen Lösung geworden. Bei der Entwicklung von Datenvisualisierungsanwendungen kann die Kombination von Vue.js und Python Flexibilität und leistungsstarke Funktionen bieten. In diesem Artikel werden einige Tipps für die Entwicklung von Datenvisualisierungsanwendungen mit Vue.js und Python gegeben und entsprechende Codebeispiele beigefügt. 1. Einführung in Vue.js Vue.js ist ein leichtes JavaScript
Integration von Vue.js mit Objective-C, Tipps und Ratschläge zur Entwicklung zuverlässiger Mac-Apps
Jul 30, 2023 pm 03:01 PM
Integration von Vue.js und Objective-C-Sprache, Tipps und Vorschläge für die Entwicklung zuverlässiger Mac-Anwendungen. In den letzten Jahren haben Entwickler mit der Popularität von Vue.js in der Front-End-Entwicklung und der Stabilität von Objective-C in der Mac-Anwendungsentwicklung begonnen Ich versuche, beides zu kombinieren, um zuverlässigere und effizientere Mac-Anwendungen zu entwickeln. In diesem Artikel werden einige Tipps und Vorschläge vorgestellt, die Entwicklern helfen sollen, Vue.js und Objective-C korrekt zu integrieren und hochwertige Mac-Anwendungen zu entwickeln. eins
So verwenden Sie PHP und Vue.js, um Datenfilter- und Sortierfunktionen in Diagrammen zu implementieren
Aug 27, 2023 am 11:51 AM
Wie man PHP und Vue.js verwendet, um Datenfilter- und Sortierfunktionen in Diagrammen zu implementieren. In der Webentwicklung sind Diagramme eine sehr gängige Art der Datendarstellung. Datenfilter- und Sortierfunktionen in Diagrammen können einfach mit PHP und Vue.js implementiert werden, sodass Benutzer die Anzeige von Daten in Diagrammen anpassen und die Datenvisualisierung und Benutzererfahrung verbessern können. Zuerst müssen wir einen Datensatz vorbereiten, den das Diagramm verwenden soll. Angenommen, wir haben eine Datentabelle, die drei Spalten enthält: Name, Alter und Klassen. Die Daten lauten wie folgt: Name, Alter, Klasse, Zhang San, 1890 Li
Entwickeln Sie effiziente Webcrawler und Daten-Scraping-Tools mit den Sprachen Vue.js und Perl
Jul 31, 2023 pm 06:43 PM
Verwenden Sie die Sprachen Vue.js und Perl, um effiziente Webcrawler und Daten-Scraping-Tools zu entwickeln. Mit der rasanten Entwicklung des Internets und der zunehmenden Bedeutung von Daten ist auch die Nachfrage nach Web-Crawlern und Daten-Scraping-Tools gestiegen. In diesem Zusammenhang ist es eine gute Wahl, Vue.js und die Perl-Sprache zu kombinieren, um effiziente Webcrawler und Daten-Scraping-Tools zu entwickeln. In diesem Artikel wird vorgestellt, wie man ein solches Tool mit Vue.js und der Perl-Sprache entwickelt, und es werden entsprechende Codebeispiele beigefügt. 1. Einführung in Vue.js und die Perl-Sprache
Integration von Vue.js und Lua-Sprache, Best Practices und Erfahrungsaustausch beim Aufbau von Front-End-Engines für die Spieleentwicklung
Aug 01, 2023 pm 08:14 PM
Die Integration von Vue.js und der Lua-Sprache, Best Practices und Erfahrungsaustausch zum Aufbau einer Front-End-Engine für die Spieleentwicklung. Einführung: Mit der kontinuierlichen Weiterentwicklung der Spieleentwicklung ist die Wahl der Spiele-Front-End-Engine zu einer wichtigen Entscheidung geworden. Unter diesen Optionen sind das Vue.js-Framework und die Lua-Sprache in den Fokus vieler Entwickler gerückt. Als beliebtes Front-End-Framework verfügt Vue.js über ein reichhaltiges Ökosystem und praktische Entwicklungsmethoden, während die Lua-Sprache aufgrund ihrer leichten und effizienten Leistung häufig in der Spieleentwicklung verwendet wird. In diesem Artikel erfahren Sie, wie das geht
So implementieren Sie mit Vue QQ-ähnliche Chat-Blaseneffekte
Sep 20, 2023 pm 02:27 PM
So implementieren Sie mit Vue QQ-ähnliche Chat-Blaseneffekte. Im heutigen sozialen Zeitalter ist die Chat-Funktion zu einer der Kernfunktionen mobiler Anwendungen und Webanwendungen geworden. Eines der häufigsten Elemente in der Chat-Oberfläche ist die Chat-Blase, die die Nachrichten des Absenders und des Empfängers klar unterscheiden kann und so die Lesbarkeit der Nachricht effektiv verbessert. In diesem Artikel wird erläutert, wie Sie mit Vue QQ-ähnliche Chat-Blaseneffekte implementieren, und es werden spezifische Codebeispiele bereitgestellt. Zuerst müssen wir eine Vue-Komponente erstellen, um die Chat-Blase darzustellen. Die Komponente besteht aus zwei Hauptteilen
Ein Leitfaden zur Entwicklung intelligenter Verträge und Blockchain-Anwendungen mit Vue.js und JavaScript
Jul 30, 2023 pm 03:18 PM
Ein Leitfaden zur Entwicklung intelligenter Verträge und Blockchain-Anwendungen mit Vue.js und JavaScript. Einführung: Mit der Entwicklung der Blockchain-Technologie bietet Ethereum als intelligente Vertragsplattform Entwicklern großen Komfort. Vue.js bietet Entwicklern als beliebtes JavaScript-Framework leistungsstarke technische Front-End-Unterstützung. In diesem Artikel finden Sie eine Anleitung zur Verwendung von Vue.js und JavaScript zur Entwicklung intelligenter Verträge und Blockchain-Anwendungen sowie Codebeispiele. Umgebungsvorbereitung zu Beginn
