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>