【VUEJS】marquee effect

 <div id="app">

  <div class="str">{{msg}}</div>

  <div class="btn-wrap">

    <input type="button" class="btn-start" value="start" @click="start" />

    <input type="button" class="btn-stop" value="stop" @click="stop" />

  </div>

</div>

.btn-start {

  text-align: center;

  color:white;

  background-color: green;

  font-size: 15px;

  margin-top: 10px;

}

.btn-stop {

  text-align: center;

  color: white;

  background-color: red;

  font-size: 15px

}

.btn-wrap {

  margin: 10px auto;

  width: 32%;

}

.str{

  background-color: rgb(116, 114, 231);

  color: white;

  font-size: 35px;

  width: 50%;

  height: 40px;

  margin: auto;

}

var vm = new Vue({

  el: "#app",

  data: {

    msg: "Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nemo obcaecati ipsam iusto quo eligendi numquam culpa, cumque, recusandae ad, iste quos. Quidem odit laborum reiciendis excepturi incidunt delectus numquam doloremque.",

    intervalId: null, 

    timerId: null

  },

  mounted() {

    this.initTimer()

  },

  methods: {

    start() {

      if (this.intervalId != null) {

        return;

      }

      this.intervalId = setInterval(() => {

        var begin = this.msg.substring(0, 1)

        var end = this.msg.substring(1)

        this.msg = end + begin

      }, 200);

    },

    stop() {

      clearInterval(this.intervalId)

      this.intervalId = null

    },

    initTimer() {

      this.timerId = setTimeout(() => {

        this.start()

      },2000)

    }

  },

  destoryed() {

    this.timerId = null

  }

});