Vue跑马灯效果

前言

Vue.js是一个Javascript框架，一套构建用户界面的渐进式框架通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件

使用Vue框架一般都会使用组件化思想，由于初学，做一个跑马灯效果尝试基本框架用法

代码

<div id="app">
    <input type="button" value="动起来" @click="lang">
    <input type="button" value="暂停" @click="stop">
    <h4>{{ msg }}</h4>
</div>
<script>
    var vm = new Vue({
        el: \'#app\',
        data: {
            msg: \'猥琐发育，别浪~~!\',
            intervalid: null
        },
        methods: {
            lang(){
                if (this.intervalid != null){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)
                this.intervalid = null
            }
        }
    })
</script>

避坑

下面说说刚开始写碰到的坑：

1. methods里的时间函数中的变量使用this不成功，原因是不能访问父作用域中的变量
   解决办法：箭头函数，箭头函数中访问的this实际上是其父级作用域中的this
2. 随着点击次数增多，计时器的时间会累积
   解决办法：添加一个条件语句，当计时器不存在时再执行函数
3. 暂停之后再次点击"动起来"没有反应，原因是调用clearInterval函数之后计时器直接清空，intervalid不再是null
   解决办法：每次调用clearInterval函数之后重新赋值为null