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 Vue-Projektoptimierung und -verpackung
Inhaltsverzeichnis Vorwort 1. Lazy Loading-Routin...
Tutorial zum Herunterladen, Installieren und Bereitstellen von Tomcat für IDEA (mit zwei Hot-Deployment-Einstellungsmethoden für IDEA)
Inhaltsverzeichnis Tomcat-Download-Tutorial Tutor...
Was sind die Unterschiede zwischen CDN, SCDN und DCDN zur Website-Beschleunigung? Wie man wählt?
1. CDN Es ist die am häufigsten verwendete Beschl...
Vue + Element + OSS realisiert das Hochladen von Front-End-Fragmenten und die Wiederaufnahme von Haltepunkten
Reine Front-End-Implementierung:切片上傳斷點續傳.斷點續傳muss...
So verwenden Sie border-image, um Beispielcode für Textblasenränder zu implementieren
Während der Entwicklungstätigkeit bin ich auf ein...
Lösung für viele Zeilenumbrüche und Wagenrückläufe in MySQL-Daten
Inhaltsverzeichnis Finden Sie das Problem 1. So e...
TimePicker im Element deaktiviert einen Teil der Zeit (deaktiviert auf Minuten)
Die Projektanforderungen lauten: Datum und Uhrzei...
Tutorial zur Optimierung der Installationskonfiguration von MySQL 8.0.18
Die Installation, Konfiguration und Optimierung v...
Auszeichnungssprachen – Was lernen, nachdem man HTML gelernt hat?
Klicken Sie hier, um zum Abschnitt „HTML-Tutorial“...
Eine kurze Diskussion über 3 bemerkenswerte neue Features in TypeScript 3.7
Inhaltsverzeichnis Vorwort Optionale Verkettung N...
Die Idee kombiniert Docker, um Image-Paketierung und Bereitstellung mit einem Klick zu realisieren
1. Docker auf dem Server installieren yum install...
Vermeidung von durch Closures verursachten Problemen in JavaScript
Über let, um Probleme durch Schließung zu vermeid...
Beispiele für die Verwendung des Li-Tags in HTML
Ich möchte den Titel links und das Datum rechts a...
CSS-Ansichtsfenstereinheiten für schnelles Layout
CSS-Viewport-Einheiten gibt es schon seit einigen...
Tipps und Vorsichtsmaßnahmen zur Verwendung des MySQL-Index
1. Die Rolle des Index In allgemeinen Anwendungss...