VUE-文字滚动

HTML

<template>
  <div>
    <ul class="lb">
      <li v-for="(item, index) in list"
          :key="index">{{item}}</li>
    </ul>
  </div>
</template>

JS

<script>
export default {
  name: 'test',
  data () {
    return {
      list: ["恭喜***asdasdas获得10积分", "恭喜***获得20积分", "恭喜***获得40积分"]
    }
  },
  mounted () {
    let that = this;
    const timer = setInterval(() => {
      setTimeout(() => {
        that.list.push(this.list[0]); // 把数组第一条推到数组的最后
        that.list.shift(); // 再把第一条数据剪切掉
      }, 500)
    }, 3000)
  },
  methods: {
  }
}
</script>