vue实现一个跑马灯效果

跑马灯效果原理分析

1.动起来按钮控制动起来事件；
2.在按钮的事件处理函数中写相关的业务逻辑代码：拿到msg字符串，然后调用字符串的
substring来进行字符串的截取操作，把第一个字符截取出来，放到最后一个位置即可；
3.为来实现点击下按钮，自动截取的功能，需要把第二步中的代码，放到一个定时器中。

<div id="app">
    <input @click="fly" type="button" value="浪起来">
    <input @click="stop" type="button" value="稳住">
    <h4>{{msg}}</h4>
</div>

<script src="lib/vue.min.js"></script>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            msg: '猥琐发育中......',
            intervarID: null
        },
        methods: {
            fly() {
                var that = this;
                if (that.intervarID != null) {
                    return
                } else {
                    that.intervarID = setInterval(() => {
                        //截取到头到第一个字符串
                        var start = that.msg.substring(0, 1);
                        //截取到后面所有到字符串
                        var end = that.msg.substring(1);
                        //重新拼接得到新到字符串，并赋值给msg
                        that.msg = end + start;
                    }, 400)
                }
            },
            stop() {
                clearInterval(this.intervarID);
                this.intervarID = null;
            }

        }
    })
</script>