substring用于跑马灯

主要说一个标签substring
var start = this.msg.substring(0, 1)
//我从第一个开始抓取，第二个往后我全 不要！

var end = this.msg.substring(1)
//他是说：我从第二个开始全都要

<template>
  <div id="app">
    <button @click="xStart()">start</button>
    <button @click="xStop()">stop</button>
    <p class="tx">{{msg}}</p>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        msg: '大噶好，我四渣渣辉！美女回收交易机油！四兄弟我们一起来玩吧            ',
        isNull: null
      }
    },
    methods: {
      xStart() {
        //数据是空的，如果不是空的就把这个按钮返会出去完成。单方向给你一个，停止再给你他一个空又能添加定时

        if (this.isNull != null) return

        this.isNull = setInterval(() => {
          var start = this.msg.substring(0, 1) //我从第一个开始抓取，第二个往后我全 不要！
          var end = this.msg.substring(1) //他是说：我从第二个开始全都要
          this.msg = end + start
        }, 200)
      },
      xStop() {
        clearInterval(this.isNull)
        this.isNull = null
      }
    }
  }
</script>

<style>
  .tx {
    width: 300px;
    white-space: pre;
    overflow: hidden;
    box-shadow: 0 0 15px #ccc;
    padding: 12px 0;
  }
</style>