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
Eine kurze Diskussion über die Rolle leerer HTML-Links
Leerer Link: Das heißt, es besteht keine Verbindu...
Bootstrap realisiert den Karusselleffekt
In diesem Artikel wird der spezifische Code von B...
Lösung zum Vergessen des Passworts bei der Installation von MySQL unter Linux/Mac
Vorwort Dieser Artikel stellt hauptsächlich die r...
19 MySQL-Optimierungsmethoden im Datenbankmanagement
Nach der MySQL-Datenbankoptimierung kann nicht nu...
Zusammenfassung einiger wichtiger Punkte zu mysql init_connect
Die Rolle von init_connect init_connect wird norm...
MySQL 5.7.29 + Win64-Dekomprimierungsversion Installations-Tutorial mit Bildern und Text
Laden Sie die offizielle Website herunter Wählen ...
Vue verwendet Element-UI, um die Menünavigation zu implementieren
In diesem Artikel wird der spezifische Code von V...
Prinzip der Docker-Containerüberwachung und Anweisungen zur Installation und Verwendung von cAdvisor
Es ist sehr wichtig, den Betriebsstatus von Conta...
Tutorial zur Bereitstellung und Installation von MySQL 8.0.18 unter Windows 7
1. Vorbereitende Schritte (Windows 7 + MySQL-8.0....
Ein QQ-Chatroom basierend auf vue.js
Inhaltsverzeichnis Einführung Nachfolgend sehen S...
Beispielcode zur Implementierung der olympischen Ringe mit reinem HTML+CSS
Rendern Code - Nehmen Sie die blauen und gelben R...
Grafisches Tutorial zur Installation und Konfiguration von MySQL 8.0.12
Das Download- und Installationstutorial für MySQL...
Beheben von Problemen beim Importieren und Exportieren von Mysql
Hintergrund Da ich alle meine Aufgaben auf Docker...
JavaScript zum Erzielen eines einfachen Karusselleffekts
Was ist ein Karussell? Karussell: In einem Modul ...
So ändern Sie die Server-UUID in MySQL
Quelle des Problems: Wenn der Slave-Server der ge...