1. 程式人生 > >Vue跑馬燈效果(es5)

Vue跑馬燈效果(es5)

<div id="app">
    <button @click="go">走</button>
    <button @click="stop">停</button>
    <h3> {{msg}} </h3>
</div>
<script>
    var vm=new Vue({
        el:'#app',
        data:{
            msg:'123456789~~',
            timer:null,
        },
        methods:{
            go:function () {
                if(this.timer!=null){
                    return;
                }
                var that=this;
                this.timer=setInterval(function () {
                    var star=that.msg.substring(0,1);
                    var end=that.msg.substring(1);
                    that.msg=end+star;
                    return that.msg;
                },400)
            },
            stop:function () {
                clearInterval(this.timer);
                this.timer=null;
            }
        }
    })
</script>