vue实现跑马灯效果

• 效果图

  • 

• 代码

  • html

    <div id="app">
        <button @click="start">开启</button>
        <button @click="stop">停止</button>
        <p>{{msg}}</p>
    </div>
    

  • vue

    var app = new Vue({
        el: "#app",     // 表示，当前我们new的这vue实例，要控制页面上的那个区域
    
        // data就是mvvm中的 m，专门用来保存每个页面的数据
        data:{
            msg: "锁定今晚19:30李佳琦直播间,不要错过哟~",
            timer: null
        },
        methods:{
            start(){
                // 通过定时器文字自己按时滚动
                // 箭头函数可以解决this指向问题
                // 箭头函数里的this指向跟函数外面的一致
    
                // 当 timer 不为空的时候才开启定时器
                if (this.timer != null) return;
                this.timer =  setInterval(() => {
                    // 获取第一个字符
                    var startMsg = this.msg.substring(0,1);
                    // 获取后面所有的字符
                    var endMsg = this.msg.substring(1);
                    // 重新拼接msg
                    this.msg = endMsg + startMsg;
                },400)
            },
    
            stop(){
                clearInterval(this.timer);
                // 可以自己打印一下清除定时器以后的timer， 会发现不是为null的，所有要重新赋值
                this.timer = null;
            }
        }
    });