vue实现简单的跑马灯效果

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

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;        }    }});