跑马灯

跑马灯
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>跑马灯</title>
    <style>
        [v-cloak] {
            display: none;
        }
    </style>
</head>
<body>
    <div id="app">
        <input type="button" value="跑起来" v-on:click="run">
        <input type="button" value="停下来" @click="stop">
        <p v-cloak>{{ msg }}</p>
    </div>
    <script src="../lib/vue-2.4.0.js"></script>
    <script>
        var vm=new Vue({
            el:"#app",
            data:{
                msg:"1111111111111111111~~~~~",
                //将定时器的id写在这里可以作为全局变量
                timeid:null
            },
            methods:{
                
            //     run:function(){
            //         var _this=this;
            //         var timeid=setInterval(function(){
            //            var start=_this.msg.substring(0,1);
            //            var end=_this.msg.substring(1);
            //            _this.msg=end+start;
            //        },300) 
            // },
            //ES6的写法
                run(){
                    //箭头函数就是把内部的this指向外部的this
                    if(this.timeid!=null)  return
                    this.timeid=setInterval(()=>{
                       var start=this.msg.substring(0,1);
                       var end=this.msg.substring(1);
                       this.msg=end+start;
                   },200) 
            },
                stop(){
                    clearInterval(this.timeid);
                    this.timeid=null

                }
            }    
        });

    </script>
    
</body>
</html>
推荐阅读更多精彩内容
