Vue跑马灯效果

 <div id="app">
    <input type="button" value="开始" @click ="start">
    <input type="button" value="停止" @click ="stop">
    <h4>{{ msg }}</h4>
  </div>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            msg: "来啊~造作啊~反正有大把时光啊~",
            intervalId: null    // 定时器Id
        },
        methods: {
            onStart() {
                if (this.intervalId != null) return
                this.intervalId = setInterval(() => {
                     // 获取到头的第一个字符
                  let start = this.msg.substring(0, 1);
                     // 获取到 后面的所有字符
                  let end = this.msg.substring(1);
                     // 重新拼接得到新的字符串，并赋值给 this.msg
                  this.msg = end + start;
                }, 400)

            },
            onStop() {
                clearInterval(this.intervalId);
                  // 每当清除了定时器之后，需要重新把 intervalId 置为 null
                this.intervalId = null
            }
        },
    })
</script>