Implementierung eines einfachen Timers basierend auf der Vue-Methode
|
Der einfache Timer von Vue dient Ihnen als Referenz. Der spezifische Inhalt ist wie folgt Prinzip: Mit setInterval wird die Selbstinkrementierungsmethode alle 1 Sekunde ausgeführt (einstellbares Zeitintervall), und mit clearInterval wird die kontinuierlich laufende Selbstinkrementierungsmethode gestoppt, um die Funktion des Timers zu erreichen. Im Vue-Teil wird die Echtzeit-Aktualisierungsansichtsfunktion von Vue verwendet, um den Wert der Auto-Inkrement-Variable auf dem Front-End anzuzeigen.
<!DOCTYPE html>
<html>
<Kopf>
<meta charset="utf-8">
<title>Zeit</title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</Kopf>
<Text>
<div id="app">
<input type="button" name="" id="" value="Starten" @click="starten"/></br>
<h1>{{Zahl}}</h1>
<input type="button" name="" id="" value="Pause" @click="stop"/></br>
</div>
<Skripttyp="text/javascript">
var vm = neuer Vue({
el:"#app",
Daten:{
Nummer:0
},
Methoden:{
start:funktion(){
Zeit = setzeIntervall(Funktion(){
vm.Nummer++
},1000)
},
stop:funktion(){
clearInterval(Zeit)
}
}
})
</Skript>
</body>
</html>Rendern
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:
|
<<: MySQL Dual-Machine Hot-Standby-Implementierungslösung [testbar]
Artikel empfehlen
Linux-Systemreparaturmodus (Einzelbenutzermodus)
Inhaltsverzeichnis Vorwort 1. Allgemeine Fehlerbe...
Docker-Protokolle - Zeigen Sie die Implementierung der Docker-Container-Protokolle an
Sie können die Containerprotokolle über den Befeh...
Protokollieren Sie ein langsames Abfrageereignis, das durch eine Fehleinschätzung des Online-MySQL-Optimierers verursacht wurde.
Vorwort: Ich habe Warnungen zu wahnsinnig langsam...
Der Browser speichert die relevanten HTTP-Header im Cache, um die Anzahl der HTTP-Anfragen zu minimieren
Ich habe vor Kurzem die 34 goldenen Regeln von Yah...
Eine kurze Erläuterung temporärer MySQL-Tabellen und abgeleiteter Tabellen
Abgeleitete Tabellen Wenn die Hauptabfrage eine a...
Implementierung der Konvertierung zwischen Unterstreichung und Camel Case in js (mehrere Methoden)
Inhaltsverzeichnis Anwendungsszenarien: Methode 1...
So importieren, registrieren und verwenden Sie Komponenten in Stapeln in Vue
Vorwort Komponenten sind etwas, das wir sehr häuf...
Mehrere Möglichkeiten zum Senden von HTML-Formularen_PowerNode Java Academy
Methode 1: Absenden über den Absenden-Button <...
Detaillierte Erläuterung des MySQL InnoDB-Sekundärindex-Sortierbeispiels
Sortierproblem Ich habe kürzlich auf Geek Time „4...
Index-Skip-Scan in MySQL 8.0
Vorwort MySQL 8.0.13 unterstützt nun den Index-Sk...
Vue implementiert scrollbaren Popup-Fenstereffekt
In diesem Artikel wird der spezifische Code von V...
Tutorial zur Installation von Nginx in einer Linux-Umgebung
Inhaltsverzeichnis 1. Installieren Sie die erford...
Detaillierter Prozess zur Installation von Presto und zum Verbinden von Hive in Docker
1. Einleitung Presto ist eine Open-Source-SQL-Abf...
Füllen Sie die Suchfunktion auf der HTML-Seite aus
Ich habe kürzlich an einem Framework gearbeitet, ...
Grafisches Tutorial zur Installation und Konfiguration von MySQL 5.7.24
In diesem Artikel finden Sie das Installations- u...