用vue简单的做一个跑马灯效果

思路是这样的：
一般制作跑马灯，都是设置一个定时器，不断地将字符串中的第一个字符添加到字符串末尾
代码如下：

<div id="app">
	<input type="button" value="动起来" @click = "active">
	<input type="stop" value="停下来" @click = "stop">
	<h4>{{msg}}</h4>
</div>
//记得引入vue库
<script>
var vn = new Vue({
	el : '#app',
	data : {
		msg : '这是一个跑马灯',
		timer = null
	},
	methods : {
		active() {
			if(this.timer !== null) return//防止多次点击动起来的按钮
			this.timer = setInterval(()=>{
				var start = this.msg.substring(0,1)
				var end = this.msg.substring(1)
				this.msg = end + start
			},300)
		},
		stop() {
			clearInterval(this.timer)
			this.timer = null
		}
	}
})
</script>

效果如下：