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>