vue如何實現數字滾動增加效果

這篇文章給大家分享的是有關vue如何實現數字滾動增加效果的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

數字滾動組件：

<template>
<div class="number-grow-warp">
 <span ref="numberGrow" :data-time="time" class="number-grow" :data-value="value">0</span>
 </div>
</template>
<script>
export default {
 props: {
  time: {
   type: Number,
   default: 2
  },
  value: {
   type: Number,
   default: 720000
  }
 },
 methods: {
  numberGrow (ele) {
   let _this = this
   let step = (_this.value * 10) / (_this.time * 1000)
   let current = 0
   let start = 0
   let t = setInterval(function () {
    start += step
    if (start > _this.value) {
     clearInterval(t)
     start = _this.value
     t = null
    }
    if (current === start) {
     return
    }
    current = start
    ele.innerHTML = current.toString().replace(/(\d)(?=(?:\d{3}[+]?)+$)/g, '$1,')
   }, 10)
  }
 },
 mounted () {
  this.numberGrow(this.$refs.numberGrow)
 }
}
</script>
<style>
.number-grow-warp{
 transform: translateZ(0);
}
.number-grow {
 font-family: Arial-BoldMT;
 font-size: 64px;
 color: #ffaf00;
 letter-spacing: 2.67px;
 margin:110px 0 20px;
 display: block;
 line-height:64px;
}
</style>

調用：

<NumberGrow :value="720000"></NumberGrow>

Vue的優點

Vue具體輕量級框架、簡單易學、雙向數據綁定、組件化、數據和結構的分離、虛擬DOM、運行速度快等優勢，Vue中頁面使用的是局部刷新，不用每次跳轉頁面都要請求所有數據和dom，可以大大提升訪問速度和用戶體驗。

感謝各位的閱讀！關于“vue如何實現數字滾動增加效果”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！