Vue implementiert einen einfachen Laufschrifteffekt

<div id="app">
    <button @click="start">Starten</button>
    <button @click="stop">Stopp</button>
    <p>{{msg}}</p>
</div>

var app = new Vue({
    el: "#app", // gibt an, dass die neue Vue-Instanz, die wir jetzt erstellen, den Bereich auf der Seite steuern wird // data ist das m in mvvm, das zum Speichern der Daten jeder Seite verwendet wird data:{
        Nachricht: „Schließen Sie sich heute Abend um 19:30 Uhr den Live-Übertragungsraum von Li Jiaqi an, verpassen Sie es nicht~“,
        Timer: null
    },
    Methoden:{
        Start(){
            // Verwenden Sie den Timertext, um rechtzeitig zu scrollen // Die Pfeilfunktion kann das „This“-Zeigeproblem lösen // Das „This“-Zeigen in der Pfeilfunktion stimmt mit dem außerhalb der Funktion überein // Der Timer wird nur eingeschaltet, wenn der Timer nicht null ist, if (this.timer != null) return;
            dieser.timer = setzeInterval(() => {
                //Erstes Zeichen abrufen var startMsg = this.msg.substring(0,1);
                // Alle folgenden Zeichen abrufen var endMsg = this.msg.substring(1);
                // msg neu zusammensetzen
                diese.msg = endMsg + startMsg;
            },400)
        },

        stoppen(){
            : ClearInterval(dieser.Timer);
            // Sie können den Timer ausdrucken, nachdem Sie ihn selbst gelöscht haben. Sie werden feststellen, dass er nicht null ist. Daher müssen Sie this.timer = null; neu zuweisen.
        }
    }
});