Vue.js 学习笔记 四 用一，二，三的知识做个跑马灯

做个简单的跑马灯效果

页面定义2个按钮，绑定2个方法。

 <div id="divApp">
        <input type="button" value="跑起来！" v-on:click="runhorse" />&nbsp;&nbsp;&nbsp;
        <input type="button" value="跑不动了" v-on:click="stophorse" />
        <h4>{{msg}}</h4>
    </div>

<script>
        var v = new Vue({
            el: '#divApp',
            data: {
                msg: '我就是跑马灯跑马灯马灯马灯灯灯灯',
                runhorseInterval: null
            },
            methods: {
                //也可以这样定义方法
                runhorse() {
                    if (this.runhorseInterval != null)
                    {
                        return;
                    }
                    //定时器，400ms
                    this.runhorseInterval = setInterval(() => {
                        //使用this获取当前实例对象，从而获取data中的属性，methods中的方法
                        var f1 = this.msg.substring(0, 1);
                        var f2 = this.msg.substring(1);
                        //Vue的实例会监听data的改变，只要发生变化，就会自动同步到页面中
                        this.msg = f2 + f1;
                    },400)
                },
                stophorse() {
                    clearInterval(this.runhorseInterval);
                    this.runhorseInterval = null;
                }
            }
        })
    </script>

需要注意的有：

　　1. 将定时器赋值给data中的属性runhorseInterval，这样在stophorse方法中可以直接用this.runhorseInterval获取到定时器，方便控制；

　　2. 在runhorse给属性runhorseInterval赋值前判断是否不为null,不为null则没有赋值的必要；

　　3. 在stophorse方法中停止定时器后，将属性runhorseInterval的值重置为null，否则再次点击启动按钮调用runhorse方法时，会过不了 !=null的验证，导致没有效果。

上一篇

Vue.js 学习笔记三，一些基础指令，v-bind,v-on