跑马灯效果

<head lang="en">
    <meta charset="UTF-8">
    <script src="lib/vue-2.4.0.js"></script>
</head>
<body>
    <div id="app">
        <input type="button" value="开始" @click="run"/>
        <input type="button" value="关闭" @click="stop"/>
        <h4>{{ msg }}</h4>
    </div>
</body>

<script>
   var vm = new Vue({
      el:"#app",
      data:{
        msg:"跑马灯文案！跑起来~~",
        intervalId:null      //在data上定义  定时器id
       },
      methods:{
        run:function(){
          if (this.intervalId != null) return;
          this.intervalId = setInterval( () =>{
//          获取到头的第一个字符
            var start = this.msg.substring(0,1);
//          获取到后面的所有字符
            var end = this.msg.substring(1);
//          重新拼接得到新的字符串，并赋值给 this.msg
            this.msg = end + start;
           },100);
        },
        stop:function(){
          clearInterval(this.intervalId);
//        每当清除了定时器之后，需要重新把 intervalId 置为 null
          this.intervalId = null;
        }
      }
  })
</script>