本文由 源码库 – 管理员 发布，转载请注明出处，如有问题请联系我们！vue.js如何实现数字滚动增加效果？代码示例

项目中需要做数字滚动增加的效果，一开始很懵，研究了一下原理，发现很简单，贴出来分享一下 ^_^数字滚动组件：<template>     <p class="number-grow-warp">         <span ref="numberGrow" :data-time="time" class="number-grow" :data-value="value">0</span>     </p> </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>