Vue realisiert den Fortschrittsbalken-Änderungseffekt
|
Dieser Artikel verwendet Vue, um einfach die Änderungen des Fortschrittsbalkens zu Ihrer Information zu implementieren. Der spezifische Inhalt ist wie folgt Zunächst eine Welle von Effektbildern:
Klicken Sie auf Minus, um jedes Mal um 10 % zu reduzieren
Nachdem der Wert auf 0% reduziert wurde, wird der Minus-Button ausgeblendet.
Klicken Sie dann auf „Neustart“, um den ursprünglichen Zustand wiederherzustellen.
Lassen Sie uns ohne weitere Umschweife mit dem Code beginnen <!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<title>Startseite</title>
<link rel="stylesheet" href="style.css" >
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</Kopf>
<Text>
<div id="vue-app">
<div Klasse="Prozess">
<div v-bind:style="{width: health+'%'}"></div>
</div>
<div Klasse="bu">
<button v-on:click="sub" v-show="!eable">Subtrahieren</button>
<button v-on:click="reset">Neustart</button>
</div>
</div>javascript - Argumente: <script src="app.js"></script>
</body>
</html>
neuer Vue({
el:"#vue-app",
Daten:{
Gesundheit: 100,
aktivieren: false
},
Methoden:
sub: Funktion () {
diese.Gesundheit -= 10;
wenn(diese.Gesundheit <= 0){
dies.eable = wahr;
}
},
zurücksetzen : Funktion () {
diese.Gesundheit = 100;
dies.eable = falsch;
}
}
});CSS: .Verfahren{
Breite: 250px;
Höhe: 30px;
Rand: 0 automatisch;
Rand: schwarz 4px durchgezogen;
}
.Prozess div{
Höhe: 30px;
Hintergrund: rot;
}
.bu{
Breite: 250px;
Rand: 20px automatisch;
}
.bu-Schaltfläche{
Rand: 0 20px;
}Die einfache Implementierungsidee ist wie folgt: Verwenden Sie v-bind:style, um den Breitenwert an die Gesundheit zu binden. Verringern Sie den Wert beim Verringern jedes Mal um 10. Wenn der Wert auf 0 abnimmt, blenden Sie die Schaltfläche zum Verringern aus. Beim Ausblenden können Sie eine Statusvariable verwenden, um es entsprechend v-show zu steuern. Wenn es wahr ist, wird es angezeigt, und wenn es falsch ist, wird es ausgeblendet. Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird. Das könnte Sie auch interessieren:
|
<<: Detaillierte Erläuterung der MySQL-Startoptionen und Beispiele für Systemvariablen
>>: Erfahren Sie, wie Sie einen Hadoop 3.x-Pseudocluster auf der Tencent Cloud erstellen
Artikel empfehlen
Detaillierte Erläuterung der stillen Anmeldung beim WeChat-Applet und der Aufrechterhaltung des benutzerdefinierten Anmeldestatus
Inhaltsverzeichnis 1. Hintergrund 2. Was ist ein ...
HTML-Code für Multiheader-Tabellen
1. Code der Multiheader-Tabelle Code kopieren Der ...
So lösen Sie das Problem der Nichtübereinstimmung des MySQL-Abfragezeichensatzes
Finden Sie das Problem Ich bin vor kurzem bei der...
CSS zum Ändern der Größe (Breite, Höhe) des Bildes, wenn die Maus über den Bild-Hyperlink fährt
So ändern Sie den Bild-Hyperlink, wenn Sie mit der...
WiFi-Entwicklung | Einführung in die WiFi-Wireless-Technologie
Inhaltsverzeichnis Einführung in die WiFi-Wireles...
Detaillierte Erläuterung des praktischen Protokolls zur Lösung der Netzwerkisolation durch Nginx
brauchen Vor Kurzem mussten wir die Node-Onlinedi...
Grafisches Tutorial zur kostenlosen Installationsversion von MySQL 5.7.16 unter Linux
In diesem Artikel wird das Tutorial zur kostenlos...
MySQL-Inspektionsskript (unbedingt lesen)
Wie unten dargestellt: #!/usr/bin/env python3.5 p...
Verwenden Sie semantische Tags, um Ihr HTML kompatibel mit IE6,7,8 zu schreiben
HTML5 fügt weitere semantische Tags hinzu, wie et...
Mysql-Timeline-Daten, um die ersten drei Daten desselben Tages zu erhalten
Erstellen von Tabellendaten CREATE TABLE `praise_...
Detaillierte Erläuterung des Bereitstellungsprozesses von Docker Alibaba Cloud RocketMQ 4.5.1
Suchspiegel Docker-Suche Rocketmq Bildversion anz...
Problem mit der Iframe-QRC-Zuweisung (serverseitig)
Ich bin heute auf dieses Problem gestoßen. Ich hab...
Grafisches Tutorial zur Installation und Konfiguration der komprimierten Version von MySQL 8.0.11
Installationsmethode für komprimierte MySQL 8.0-P...
JS Canvas realisiert die Funktionen von Zeichenbrett und Signaturtafel
In diesem Artikel wird der spezifische Code von J...
Detaillierte Erklärung der HTML-Tabellen-Tags (für Anfänger geeignet)
TABELLE> <TR> <TD> <TH> <...