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如何实现数字滚动增加效果”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！