今天，在课上学习了最新的流行框架vue，老师教我们用vue实现走马灯效果。
别说别的了，直接贴代码
<body>
<div id="app">
<input type="button" value="浪起来" @click="lang" />
<input type="button" value="低调" @click="stop" />
<h4>{{ msg }}</h4>
</div>
</body>
<script>
var vm = new Vue({
el:'#app',
data:{
msg:'猥琐发育，别浪~',
intervalId:null
},
methods:{
lang(){
// 为了不重复执行走马灯，我们需要进行判断，如果为null，则执行走马灯，否则不执行
if( null != this.intervalId ) return;
this.intervalId = setInterval(() => {
var start = this.msg.substring(0,1);
// 获取到 后面的所有字符
var end = this.msg.substring(1);
// 将字符串拼接
this.msg = end + start;
}
,400)
},
stop(){
clearInterval(this.intervalId);
// 每当清除了id，需要将id重新赋值为null
this.intervalId = null;
}
}
})
</script>
这样跑马灯效果就实现了！！！希望能够帮助到各位~0.0~