需求

产品希望我们的网站可以类似阿里这样数据动态变化。

不多说，上代码！

``

<ul class="flex-row justify-center">
            <li class="flex-row justify-center items-center" v-for="(item, index) in titleList" :key="index">
              <img :src="item.path" class="image_1" />
              <div class="section_5">
                <p class="text_2" :id="'sum' + index"></p>
                <p class="text_3">{{ item.name }}</p>
              </div>
            </li>
          </ul>

<p class="text_2" :id="'sum' + index"></p>

这里不再直接我没有直接填上值。后面用 innerText填充。。

继续

onMounted(() => { 
  for (let i = 0; i < titleList.value.length; i++) {
    mathCount(i, titleList.value[i].sum)
  }
})
function mathCount(i, num) {
  num = num.replace(/,/g, '')
  var timer2
  // clearInterval(timer2.value)
  var newNum = 0
  var str
  var count = 0
  var domEle = document.getElementById('sum' + i)
  count = Math.round(num / 30)
  timer2 = setInterval(() => {
    if (newNum <= num) {
      newNum += count
      str = newNum.toString()
    }
    if (newNum >= num) {
      clearInterval(timer2)
      str = num.toString()
    }
    domEle.innerText = formatNum(str)   //formatNum是我对数据进行的格式化，类似这样的‘4,568,392’ 代码就不粘了
  }, 50)
}

完了