vue 实现 多个 数字滚动增加动效

参考网上其他同学写的 具体出处忘了，不然一定贴上，有问题请联系。

图一是具体js代码；二是设置定时器；三是dom节点需要写ref

numberGrow (ele) {

      this.summaryData.forEach((eachVal, index) => {

        let _this = this

        let step = parseInt((eachVal.num * 10) / (_this.time * 1000))

        let current = 0

        let start = 0

        let t = setInterval(function () {

          start += step

          if (start > eachVal.num) {

            clearInterval(t)

            start = eachVal.num

            t = null

          }

          if (current === start) {

            return

          }

          current = start

          ele[index].innerHTML = current.toString().replace(/(\d)(?=(?:\d{3}[+]?)+$)/g, '$1,')

        }, 10)

      })

    },

mounted () {

    const that = this

    const timer = setInterval(function () {

　　　　that.numberGrow(that.$refs.numberGrow)

    }, 4000)

// 赠送  --------  跳转其他页面 清除定时器，通过$once来监听定时器，在beforeDestroy钩子可以被清除。

this.$once('hook:beforeDestroy', () => { clearInterval(timer) })

}

<li v-for="(item, index) in summaryData" :key="index">

          <p ref="numberGrow"

            :data-time="time"

            :data-value="item.num"></p>

          <p class="summary-tit">{{item.title}}</p>

        </li>