<head lang="en">
<meta charset="UTF-8">
<script src="lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
<input type="button" value="开始" @click="run"/>
<input type="button" value="关闭" @click="stop"/>
<h4>{{ msg }}</h4>
</div>
</body>
<script>
var vm = new Vue({
el:"#app",
data:{
msg:"跑马灯文案！跑起来~~",
intervalId:null //在data上定义 定时器id
},
methods:{
run:function(){
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;
},100);
},
stop:function(){
clearInterval(this.intervalId);
// 每当清除了定时器之后，需要重新把 intervalId 置为 null
this.intervalId = null;
}
}
})
</script>
