vue学习笔记：1.vue实现简单的跑马灯效果

一个简单的跑马灯效果启发，可以依次扩展更多效果

思想分析：利用定时器控制截取字符串长度动态循环显示
Html

<div id="app">
<input type="button" value="开始" @click="begain">
<input type="button" value="停止" @click="stop">
<h4>{{ msg }}</h4>
</div>

js

var vm = new Vue({
el: '#app',
data: {
msg: '我是跑马灯~~！',
timer: null
},
methods: {
begain: function(){
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;
// console.log(start);
// console.log(end)
},400);

},
stop: function(){
clearInterval(this.timer);
this.timer = null;
}
}
})

效果图