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
Webdesigner sollten Webseiten unter drei Aspekten optimieren
<br />Mit der zunehmenden Bandbreite werden ...
Detaillierte Erläuterung des Implementierungsprozesses der Nginx-Protokoll-Timing-Aufteilung in CentOS 7
1. Schreiben Sie ein Split-Skript (splitNginxLog....
Verschieben Sie die MySQL-Datenbank unter Windows auf eine andere Festplatte
Vorwort Heute habe ich MySQL installiert und fest...
Diagramm zur Installation von VMware 14 unter Windows 10
Software-Download Link zum Herunterladen der Soft...
Eine kurze Diskussion über die Unterschiede zwischen den drei wichtigsten Datenbanken: Mysql, SqlServer und Oracle
MySQL Vorteil: Kleine Größe, hohe Geschwindigkeit...
MySQL-Integritätsbeschränkungen – Definition und Beispiel-Tutorial
Inhaltsverzeichnis Integritätsbeschränkungen Defi...
Detaillierte Erklärung zur Verwendung von Vue.prototype in Vue
Inhaltsverzeichnis 1. Einfaches Beispiel 2. Legen...
Detaillierter Prozess zum Dekomprimieren und Installieren von mysql5.7.17 zip
1. Adresse herunterladen https://dev.mysql.com/do...
Vue + ElementUI implementiert Paging-Funktion - MySQL-Daten
Inhaltsverzeichnis 1. Problem 2. Lösung 2.1 Pagin...
Vue integriert Tencent TIM Instant Messaging
In diesem Artikel wird hauptsächlich die Integrat...
So führen Sie einen Befehl zu einem bestimmten Zeitpunkt in Linux aus
Neulich habe ich rsync verwendet, um eine große D...
Installations- und Verwendungsschritte für vue-amap
Ich habe zuvor die Verwendung des asynchronen Lad...
SpringBoot integriert Activiti7-Implementierungscode
Nach der offiziellen Veröffentlichung von Activit...
Eine kurze Analyse, wie Sie das Root-Passwort in Linux suse11 ändern können, wenn Sie es vergessen haben
So lösen Sie das Problem des Vergessens des Root-...
So entfernen Sie Leerzeichen oder bestimmte Zeichen in einer Zeichenfolge in der Shell
Im Internet finden sich zahlreiche Methoden, die ...