Vue跑马灯小案例

html模块！！

   	
    <div id="app">
     <h4> {{msg}} </h4>
     //开始跑马状态
     <input type="button" value="飘" @click='lang'>
     //停止
     <input type="button" value="定住" @click='stop'>
    </div>

script模块

   var vm =new Vue({
                 el:'#app',
                 data:{
                     msg:'主要是开心！加油~~~！',
                     intervalId:null,//在data定义 定时器Id
                 },
                 methods:{
                     lang(){
                       //判断当前这个跑马是否有点击跑马，有则不执行下面。防止多次点击
                         if(this.intervalId!==null) return;
                        //  console.log(this.msg)
                        this.intervalId=setInterval(() => {  //开启定时器 
                         var start=this.msg.substring(0,1)
                         var end=this.msg.substring(1)
                         //获取新的字符串，重新拼接，重新赋值给 this.msg
                         this.msg =end+start
                        },500) 
                        /*注意
                            Vue 实例，是会监听自己身上的 data中所有数据的改变，只要数据发生改变，就会把最新的数据同步到页面上
                            优点：这样子就不用考虑重新渲染DOM页面，只要把数据弄好就ojbk了
                        
                        
                        */  
                     },
                     stop(){ //停止定时器
                         clearInterval(this.intervalId)
                         console.log(31)
                         this.intervalId=null //每当停止定时器后 重新赋值维null 
                     }
                 }
            })