vue实现滚动字幕 跑马灯效果

vue实现滚动字幕 跑马灯效果

v 视图层

 <div id="app">
        <input type="button" value="浪起来" @click="start">
        <input type="button" value="别浪" @click="stop">
        <p style="width:200px;overflow: hidden;height:20px">{{msg}}</p>
    </div>

vm层

 let vm = new Vue({
            el:"#app",
            data:function(){
                return {
                    msg:"猥琐发育，别浪！长江后浪推前浪，此时不浪何时浪",
                    intervalId:null
                }
            },
            methods:{
                start(){
                    if(this.intervalId !== null){
                        return;
                    }else{
                        this.intervalId = setInterval(()=>{
                            let startStr = this.msg.substring(0,1);
                            let endStr = this.msg.substring(1);
                            this.msg = endStr + startStr;
                        },400)
                    }
                    
                },
                stop(){
                    clearInterval(this.intervalId)
                    this.intervalId = null;
                }
            }
        })