vue 数字动画递增_vue 实现数字滚动增加效果的实例代码

这篇文章主要为大家详细介绍了vue 实现数字滚动增加效果的实例代码，具有一定的参考价值，可以用来参考一下。

感兴趣的小伙伴，下面一起跟随512笔记的小编两巴掌来看看吧！

项目中需要做数字滚动增加的效果，一开始很懵，研究了一下原理，发现很简单，贴出来分享一下 ^_^

数字滚动组件：

代码如下：

0

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)

}

}

.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;

}

调用：

代码如下：

总结

以上所述是小编给大家介绍的vue 实现数字滚动增加效果的实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对512笔记网站的支持！

注：关于vue 实现数字滚动增加效果的实例代码的内容就先介绍到这里，更多相关文章的可以留意512笔记的其他信息。

关键词：vue.js