Vue realisiert einfachen Effekt des Lauflichts
|
In diesem Artikel wird der spezifische Code von Vue zur Erzielung eines einfachen Laufschrifteffekts als Referenz bereitgestellt. Der spezifische Inhalt ist wie folgt 1. Laufschrifteffekt
Beschreibung: Klicken Sie auf die Schaltfläche „Support“, um den Text nach links schweben zu lassen, und klicken Sie dann auf die Schaltfläche „Pause“, um das aktuelle Schweben zu stoppen.
2. Code vervollständigen (Hinweis: Die Datei vue.js muss in den Code eingefügt werden. Diese Datei wird entsprechend dem Verzeichnisspeicherort eingefügt. Der spezifische Speicherort wird im Code kommentiert.)
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<title>Festzelt</title>
<!-- Datei vue.js importieren-->
<script src="../vue.js"></script>
<style type="text/css">
#app{
Polsterung: 20px;
}
</Stil>
</Kopf>
<Text>
<div id="app">
<button @click="run">Unterstützung</button>
<button @click="stop">Pause</button>
<h3>{{msg}}</h3>
</div>
<Skript>
neuer Vue({
el:"#app",
Daten:{
msg:"Freunde, Freunde, ich liebe euch, genau wie Mäuse Reis lieben~~~!",
timer:null //Definiere den Timer für Daten, der Standardwert ist null
},
Methoden:{
laufen(){
// Wenn ein Timer zugewiesen wurde, returniere if(this.timer){return};
dieser.timer = setzeInterval(() => {
// msg wird in Arrays aufgeteilt var arr = this.msg.split('');
// Shift löscht und gibt das Gelöschte zurück, Push fügt am Ende hinzu // Setze das erste Element des Arrays ans Ende arr.push(arr.shift());
// arr.join('') verbindet das Array mit einem String und kopiert es nach msg
diese.msg = arr.join('');
},100)
},
stoppen(){
//Timer löschen clearInterval(this.timer);
//Nachdem Sie den Timer gelöscht haben, müssen Sie ihn wieder auf Null setzen.
dieser.timer = null;
}
}
})
</Skript>
</body>
</html>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:
|
>>: Eine kurze Diskussion zum CSS-Höhenkollapsproblem
Artikel empfehlen
Lösen Sie das Problem des MySQL-Datenverlusts, wenn Docker Redis neu startet
Amtliche Dokumentation: Daher sollte MySQL wie fo...
CSS-Stil funktioniert nicht (die umfassendste Lösungszusammenfassung der Geschichte)
Beim Schreiben von Seiten stellen wir manchmal fe...
XHTML drei Dokumenttypdeklarationen
XHTML definiert drei Dokumenttypdeklarationen. Am...
React useEffect verstehen und verwenden
Inhaltsverzeichnis Vermeiden Sie sich wiederholen...
JavaScript implementiert das Protokollbeispiel, in dem der Benutzer das Kontrollkästchen aktivieren muss
Legen Sie in js fest, dass der Benutzer vor der Ü...
JavaScript implementiert Farberkennung beim Überfahren der Tabellenzeile mit der Maus
In diesem Artikel erfahren Sie, wie Sie mit JavaS...
Detaillierte Erklärung zur Installation von MySQL in der Alibaba Cloud
Als leichte Open-Source-Datenbank wird MySQL häuf...
Detaillierte Erklärung der Anwendung von CSS Sprite
CSS Sprite, auch bekannt als CSS Sprite, ist eine...
Entwurf und Implementierung eines Supermarkt-Warenwirtschaftssystems auf Basis von Mysql+JavaSwing
Inhaltsverzeichnis 1. Funktionseinführung 2. Schl...
So fügen Sie eine Schnittstellen-Abhörmaske in ein Vue-Projekt ein
1. Geschäftshintergrund Die Verwendung einer Mask...
Detaillierte Schritte zur Installation des NERDTree-Plugins in Vim unter Ubuntu
NERDTree ist ein Dateisystembrowser für Vim. Mit ...
Farben werden in HTML durch 6-stellige Hexadezimalcodes, RGB oder Schlüsselwörter dargestellt.
Es gibt drei Möglichkeiten, Farben in HTML darzust...
Warum wird deine Like-Aussage nicht indexiert?
Vorwort Dieser Artikel zielt darauf ab, die langw...
Detaillierte Erläuterung der Überwachung von Spaltenüberläufen ohne Primärschlüssel in MySQL-Tabellen
Heute bin ich wieder in die Falle getappt. Ich bi...
Detaillierte Untersuchung, ob bei der MySQL-Fuzzy-Abfrage zwischen Groß- und Kleinschreibung unterschieden wird
Vorwort Vor kurzem war ich damit beschäftigt, ein...