Vue implements a simple marquee effect

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

var app = new Vue({
    el: "#app", // indicates that the new vue instance we are creating now will control the area on the page // data is the m in mvvm, which is used to store the data of each page data:{
        msg: "Lock on Li Jiaqi's live broadcast room at 19:30 tonight, don't miss it~",
        timer: null
    },
    methods:{
        start(){
            // Use the timer text to scroll on time // Arrow function can solve the this pointing problem // The this pointing in the arrow function is consistent with that outside the function // The timer is turned on only when timer is not null if (this.timer != null) return;
            this.timer = setInterval(() => {
                // Get the first character var startMsg = this.msg.substring(0,1);
                // Get all the characters that follow var endMsg = this.msg.substring(1);
                // Reassemble msg
                this.msg = endMsg + startMsg;
            },400)
        },

        stop(){
            clearInterval(this.timer);
            // You can print the timer after clearing the timer yourself, and you will find that it is not null, so you need to reassign this.timer = null;
        }
    }
});