请添加图片描述

 

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` 方法来清除定时器,以避免内存泄漏的问题。

 

 

GitHub 加速计划 / vu / vue
207.54 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:2 个月前 )
73486cb5 * chore: fix link broken Signed-off-by: snoppy <michaleli@foxmail.com> * Update packages/template-compiler/README.md [skip ci] --------- Signed-off-by: snoppy <michaleli@foxmail.com> Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 4 个月前
e428d891 Updated Browser Compatibility reference. The previous currently returns HTTP 404. 5 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐