Vue实现态展示数字（从0动态涨到指定数字）

 

1 安装插件
npm install vue-animate-number

2 在main.js中引入

import VueAnimateNumber from 'vue-animate-number'
Vue.use(VueAnimateNumber)

3使用:

1.在 `data` 中定义动态展示的数字。

2.在 `created` 钩子函数中，使用 `setInterval` 定时器来更新数字的值。

3.在 `beforeDestroy` 钩子函数中清除定时器。

示例代码如下：

<animate-number from="1" :to="entryRod" :key="entryRod"></animate-number>

data(){
        return{
         entryRod: '500',
         rodNumber：null,
        }
    }
  created() {
    //数字定时器动态循环设置
    this.rodNumber = setInterval(() => {
      this.entryRod++;
    }, 5000); // 每隔 1 秒更新数字的值
  },

 beforeDestroy() {
    clearInterval(this.rodNumber); // 在组件销毁前清除定时器
  },

备注：1.在animate-number中，建议加上:key，这样可以适应toNum的动态变化；

我们在 `created` 钩子函数中使用 `setInterval` 定时器更新数字的值。在每次定时器执行时，通过 `this.number++` 操作来更新数字的值，在模板中使用 `entryRod` 将其动态展示出来。在 `beforeDestroy` 钩子函数中通过 `clearInterval` 方法来清除定时器，以避免内存泄漏的问题。