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
Vollständige Schritte zur Verwendung von Echarts und Unterverpackungen im WeChat Mini-Programm
Vorwort Obwohl der Feiertag vorbei ist, zeigt er ...
Der Implementierungsprozess der Linux-Prozessnetzwerkverkehrsstatistik
Vorwort Linux verfügt über entsprechende Open-Sou...
Docker-Compose-Installationsmethode für die YML-Dateikonfiguration
Inhaltsverzeichnis 1. Offline-Installation 2. Onl...
Ein paar Dinge zu favicon.ico (am besten im Stammverzeichnis ablegen)
Öffnen Sie eine beliebige Webseite, zum Beispiel ...
Hauptfunktionen von InnoDB - Cache einfügen, zweimal schreiben, adaptive Hash-Indexdetails
Zu den wichtigsten Funktionen der InnoDB-Speicher...
So zeigen Sie die Zeitzone in MySQL an und ändern sie
Heute habe ich festgestellt, dass ein Programm ei...
Tutorial zur MySQL-Installation in der Linux-CentOS7-Umgebung
Detaillierte Einführung in die Schritte zur Insta...
Die Tabelle verwendet: nth-child(), um abwechselnde Farbänderungen und Ausrichtungen zu erreichen
Kerncode <!DOCTYPE html> <html lang=&quo...
Fügen Sie Linux eine Startmethode hinzu (Dienst/Skript)
Konfigurationsdatei, die beim Systemstart geladen...
JavaScript-Implementierung des klassischen Schlangenspiels
In diesem Artikel wird der spezifische JavaScript...
Detaillierte Erklärung zur korrekten Installation von OpenCV auf Ubuntu
Dieser Artikel beschreibt, wie man OpenCV mit C++...
Lernen wir JavaScript objektorientiert kennen
Inhaltsverzeichnis JavaScript-Prototypenkette Obj...
Welche Vorteile bietet die Verwendung eines B+-Baums als Indexstruktur in MySQL?
Vorwort In MySQL verwenden sowohl Innodb als auch...
Grafisches Tutorial zur Installation der MySQL 8.0.12-Dekomprimierungsversion unter Windows 10
Dieser Artikel zeichnet das Installations-Grafik-...
Lassen Sie uns im Detail darüber sprechen, wie der NodeJS-Prozess beendet wird
Inhaltsverzeichnis Vorwort Aktiver Rückzug Ausnah...