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>