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