項目中需要做數字滾動增加的效果，一開始很懵，研究了一下原理，發現很簡單，貼出來分享一下 ^_^

數字滾動組件：

<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 實現數字滾動增加效果的實例代碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對錯新站長站網站的支持！