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;
	    }
	}
})

效果图