Detaillierte Verwendung des Vue-Timers
|
In diesem Artikelbeispiel wird der spezifische Code von Vue zur Implementierung des Timers zu Ihrer Information geteilt. Der spezifische Inhalt ist wie folgt
Funktionseinführung:1. Der Anfangswert ist 0. Klicken Sie auf die Schaltfläche [Hinzufügen] und die Zahl wird um 1 erhöht. Durch wiederholtes Klicken auf [Hinzufügen] wird die Zahl +1 nicht beeinflusst. 2. Klicken Sie auf die Schaltfläche [Stop], um +1 zu stoppen Quellcode:
<!DOCTYPE html>
<html add="de">
<Kopf>
<meta charset="UTF-8">
<meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
<meta http-equiv="X-UA-kompatibel" content="ie=edge">
<title>Dokument</title>
<!-- 1. Importieren Sie das Vue-Paket-->
<script src="./lib/vue-2.4.0.js"></script>
</Kopf>
<Text>
<!-- 2. Erstellen Sie einen zu kontrollierenden Bereich -->
<div id="app">
<input type="button" value="Hinzufügen" @click="hinzufügen">
<input type="button" value="Stopp" @click="stop">
<h4>{{ Anzahl }}</h4>
</div>
<Skript>
var vm = neuer Vue({
el: '#app',
Daten: {
Anzahl: 0,
Intervall-ID: null
},
Methoden: {
hinzufügen() {
// Timer läuft, Funktion beenden, wenn (this.intervalId != null) {
zurückkehren
};
// Der Timer ist leer, Operation this.intervalId = setInterval(() => {
dies.Anzahl += 1
}, 400)
},
// Stoppe den Timer stop() {
clearInterval(this.intervalId) // Timer löschen this.intervalId = null; // Auf null setzen
}
}
})
</Skript>
</body>
</html>Zuvor hat der Editor eine Komponente zum Starten des Timings gesammelt. Diese Komponente kann zur Verwendung direkt in das Projekt eingeführt werden. Vielen Dank fürs Teilen.
<Vorlage>
<div Klasse="Zeitgeber">
<div ref="startTimer"></div>
</div>
</Vorlage>
<Skript>
Standard exportieren {
Name: 'Timer',
Daten () {
zurückkehren {
Timer: "",
Inhalt: "",
Stunde: 0,
Minuten: 0,
Sekunden: 0
}
},
erstellt () {
dieser.timer = setzeInterval(dieser.startTimer, 1000);
},
zerstört () {
: ClearInterval(dieser.Timer);
},
Methoden: {
startTimer () {
dies.Sekunden += 1;
wenn (diese.Sekunden >= 60) {
diese.Sekunden = 0;
diese.Minute = diese.Minute + 1;
}
wenn (diese.Minute >= 60) {
diese.Minute = 0;
diese.Stunde = diese.Stunde + 1;
}
dies.$refs.startTimer.innerHTML = (diese.Minuten < 10 ? '0' + diese.Minuten : diese.Minuten) + ':' + (diese.Sekunden < 10 ? '0' + diese.Sekunden : diese.Sekunden);
}
}
}
</Skript>
<Stil>
</Stil>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:
|
>>: Backup zwischen MySQL-Datenbank und Oracle-Datenbank importieren
Artikel empfehlen
Docker trifft auf Intellij IDEA, Java-Entwicklung steigert die Produktivität um das Zehnfache
Inhaltsverzeichnis 1. Vorbereitung vor der Entwic...
SQL-Gruppierung zum Entfernen von Duplikaten und Sortieren nach anderen Feldern
brauchen: Identische Elemente eines Feldes zusamm...
So installieren Sie JDK und legen Umgebungsvariablen in Linux fest (dieser Artikel reicht aus)
Inhaltsverzeichnis 1. Überprüfen Sie die Anzahl d...
Zusammenfassung der MySQL-Zeichensätze
Inhaltsverzeichnis Zeichensatz Vergleichsregeln V...
Probleme bei der Verwendung mehrerer einfacher und dreifacher Anführungszeichen in MySQL concat
Beim dynamischen Verketten von Zeichenfolgen verw...
Befehle zum Deaktivieren und Aktivieren von MySQL-Fremdschlüsseleinschränkungen
Deaktivieren und Aktivieren von MySQL-Fremdschlüs...
Vollständige MySQL-Sicherung und schnelle Wiederherstellungsmethoden
Ein einfaches MySQL-Vollsicherungsskript, das die...
js zum Hochladen von Bildern auf den Server
In diesem Artikelbeispiel wird der spezifische Co...
Installieren Sie Mininet aus dem Quellcode auf Ubuntu 16.04
Mininet Mininet ist eine leichtgewichtige, softwa...
Lösung für mehrere Docker-Container, die nicht die gleiche Portnummer haben
Hintergrund In Docker werden vier Container mit d...
So laden Sie die Kamera in HTML
Wirkungsdiagramm: Gesamtwirkung: Video wird gelad...
Lernen, React-Gerüste zu bauen
1. Komplexität des Front-End-Engineerings Wenn wi...
Detaillierte Erläuterung des primitiven Datentyps Symbol in JavaScript
Inhaltsverzeichnis Einführung Beschreibung Namens...
Verwendung und Unterschied von Vue.set() und this.$set()
Wenn wir Vue zur Entwicklung verwenden, kann eine...
Ursachen und Lösungen für den Nginx 502 Bad Gateway-Fehler
Der Nginx 502 Bad Gateway-Fehler ist mir schon me...