Vue realisiert einfachen Effekt des Lauflichts

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:
  • Text-Marquee-Komponente basierend auf Vue (npm-Komponentenpaket)
  • Vue implementiert einen einfachen Laufschrifteffekt
  • Vue erzielt einen nahtlosen Karusselleffekt (Laufschrift)
  • Vue implementiert horizontales Scrollen von Text im Laufschriftstil
  • Vue implementiert den Marquee-Effekt
  • Vue-Beispielcode mit Timer zum Erzielen eines Laufschrifteffekts
  • Vue implementiert ein einfaches Laufschrift
  • Js und VUE, um den Laufstegeffekt zu erzielen
  • Vue implementiert einen einfachen Laufschrifteffekt
  • Detaillierte Erklärung zur Verwendung der Vue-Marquee-Komponente

<<:  Jedes Mal, wenn Docker einen Container startet, werden die IP und die Hosts mit den angegebenen Operationen

>>:  Eine kurze Diskussion zum CSS-Höhenkollapsproblem

Artikel empfehlen

Tutorial zur MySQL-Datensicherungsmethode mit Multi-Master und One-Slave

Überblick Vorgänge, die auf einer Datenbank ausge...

Zusammenfassung der Wissenspunkte zum Abdecken von Indizes in MySQL

Wenn ein Index die Werte aller abzufragenden Feld...

Erweiterte Docker-Methode zur schnellen Erweiterung

1. Befehlsmethode Führen Sie den Nginx-Dienst im ...

Zusammenfassung der Diskussion zur Gültigkeitsdauer von Nginx-Cookies

Bei jedem Besuch wird im Browser Cookie generiert...

Implementierung der Nginx-Konfiguration HTTPS-Sicherheitsauthentifizierung

1. Der Unterschied zwischen HTTP und HTTPS HTTP: ...

Detaillierte Erklärung der Verwendung und Erfahrung mit tinyMCE

Detaillierte Erklärung der tinyMCE-Verwendung Ini...

Schritte zum Erstellen der MHA-Architekturbereitstellung in MySQL

Inhaltsverzeichnis MAH 1. Einführung in die MAH-A...

MySQL-Index für Anfänger

Vorwort Da die wichtigste Datenstruktur im MySQL-...

Probleme mit der Rancher-Bereitstellung und dem Importieren von K8S-Clustern

Die Rancher-Bereitstellung kann über drei Archite...

25 neue nützliche Icon-Sets zum Download im Ausland

1. E-Commerce-Symbole 2. Symbol Süßigkeiten 2 3. ...