vue.js 实现跑马灯的效果

要求：点击“动起来”按钮实现跑马灯的效果（即字符自动滚动），点击“不要动”按钮实现跑马灯停止。

html源码：

<div  id="go">
    <button @click="fun">动起来</button>
    <button @click="stop">不许动</button>
    <p>{{ent}}</p>
</div>

vue.js源码：

var go = new Vue({
    el:"#go",
    data:{
        ent:"套马杆的汉字威武雄壮!  "
    },
    methods:{
        dong: function(){
                var first = this.ent.substring(0,1);           //获取第一个字符
                var end = this.ent.substring(1);              //获取第二个及其以后的所有字符
                this.ent=end+first;                           //将第一个字符放置末尾
        },
        fun:function(){
            this.timer = setInterval(this.dong, 400);       //计时器，400毫秒执行一次dong函数
        },
        stop:function(){                                     //停止函数
            clearInterval(this.timer);                     
        }
    }
})

 

效果图：

（我不会截动图，就是那么个意思^_^）