vuecli3.0实现文字横向滚动

借鉴：https://www.cnblogs.com/zhahuhu/p/11592400.html

实例：

//template中的元素代码
<div v-for="item in hdanger" :key="item.id">
    <i>{{ item.hazardDesc }}</i>
</div>

//script中的data数据
<script>
    export default {
        data(){
            timmer: null, //定时器id
            return {
                hdanger:[{
                    id:Math.ramdom(),
                    hazardDesc:"vvjdfvhjdfhvbjhfjbvgh" 
                },{
                    id:Math.ramdom(),
                    hazardDesc:"buvfgnhjighjmkhjmkmhknhkmnhkhkkgbjnkg"
                }]
            }
        },
        created() {
            this.show();
        },
        beforeDestroy(){
            this.stop();
        },
        methods:{
            show() {
              // console.log(this.hdanger)
              if (this.timer != null) return;
              this.timer = setInterval(() => {
                  if(this.hdanger != null) {
                      for (let i = 0; i < this.hdanger.length; i++) {
                      if (this.hdanger[i].hazardDesc.length > 12) {
                          //获取到头的第一个字符
                          let start = this.hdanger[i].hazardDesc.substring(0, 1);
                          //获取到后面的所有字符
                          let end = this.hdanger[i].hazardDesc.substring(1);
                          this.hdanger[i].hazardDesc = end + start;
                      }
                   }
                }
                //重新拼接得到新的字符串，并赋值给this.message
              }, 700);
            },
            stop() {
                //清除定时器
                clearInterval(this.timer);
                //清除定时器之后，需要重新将定时器置为null
                this.timer = null;
            },
        }
    }
</script>