[Vue] 跑马灯效果demo

起步HTML:

<div id="wrap">
	<div id="head">
		<p id="lamp">得不到的永远在骚动，被偏爱的都有恃无恐!!! &nbsp;</p><hr />
		<input id="start" type="button" value="开始" />
		<input id="stop" type="button" value="结束" />
	</div>
</div>

CSS样式：

*{margin: 0;padding: 0; font-size: 26px;}
#wrap{width: 100%;color: deeppink;}
/*margin设置head盒子在页面居中、text-align设置内容字体居中*/
#head{width: 50%; margin: 0 auto;text-align: center;}

Vue代码：

var vm = new Vue({
	el:"#wrap",
	data:{
		msg:'得不到的永远在骚动，被偏爱的都有恃无恐!!! ',
		intervalId:null	//在data上定义定时器Id
	},
	methods:{
		start(){
			if (this.intervalId != null){
				return;
			}
			this.intervalId = setInterval(() => {	//开启定时器
				//获取头部的第一个字符
				var start = this.msg.substring(0,1);
				//获取到后面的所有字符
				var end = this.msg.substring(1)
				//重新拼接成新的字符串，并赋值给this.msg
				this.msg = end + start;
			},400)
		},
		end(){
			clearInterval(this.intervalId)
			//每当清除了定时器之后，需要重新把intervalrd置为null
			this.intervalId = null;
		}
	}
});

效果如下：