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
Sechs wichtige Selektoren in CSS (merken Sie sie sich in drei Sekunden)
Von: https://blog.csdn.net/qq_44761243/article/de...
Bei der Installation einer virtuellen Maschine auf Thinkpad VMware erscheint die Meldung „Dieser Host unterstützt Intel VT-x, aber Intel VT-x ist deaktiviert“ (Problemlösung)
Als ich heute VMware verwendete, um eine neue vir...
Webdesign: Wenn der Titel nicht vollständig angezeigt werden kann
<br />Ich habe mir heute die neu gestaltete ...
JavaScript-Code zum Erzielen eines einfachen Kalendereffekts
In diesem Artikel wird der spezifische Code für J...
So implementieren Sie das parallele Herunterladen großer Dateien in JavaScript
Inhaltsverzeichnis 1. HTTP-Bereichsanforderung 1....
10 Tipps für das User Interface Design mobiler Apps
Tipp 1: Konzentriert bleiben Die besten mobilen A...
Detaillierter Prozess für den Einstieg mit Docker Compose HelloWorld
Voraussetzungen Compose ist ein Tool zum Orchestr...
Ein praktischer Bericht über den Umgang mit den in Linux-Servern implantierten Mining-Viren ddgs und qW3xT.2
Vorwort Angesichts der verrückten Spekulationen u...
Das Implementierungsprinzip von Vue Router-View und Router-Link
verwenden <div id="app"> <rout...
Vollständiger Schrittbericht der TabBar-Komponente der Vue-Kapselung
Inhaltsverzeichnis Umsetzungsideen: Schritt 1: Ko...
Detaillierte Erklärung von Group By und Having in MySQL
Mit der GROUP BY-Syntax können die Abfrageergebni...
Detaillierte Erklärung, wie man IP-Adressen effektiv in MySQL speichert und wie man zwischen String-IP und numerischen Werten konvertiert
In Bezug auf High Performance MySQL Version 3 (Ab...
Tutorial zur Installation der Internetzugriffskonfiguration für Linux 7.2 auf einer virtuellen VMware-Maschine unter Win7
Installieren Sie die Linux7.2-Internetzugriffskon...
Einführung in die Verwendung von Requisiten in Vue
Vorwort: In Vue können Props verwendet werden, um...
Einführung in HTML für Frontend-Entwickler
1 Einführung in HTML 1.1 Erste Erfahrungen mit Co...