【工具】CountUp.js

作用:实现数字的动画展示效果


使用步骤:

  1. 安装

    复制代码
    npm i countup.js
  2. 导入

    复制代码
    import { CountUp } from 'countUps';
  3. HTML结构

    复制代码
    <span ref="countup1Ref">{{ props.number1 }}</span>
    <span ref="countup2Ref">{{ props.number2 }}</span>
  4. 创建实例

    复制代码
    const countup1Ref = ref<HTMLElement>();
    const countup2Ref = ref<HTMLElement>();
    onMounted(() => {
      const countup1 = new CountUp(countup1Ref.value!, props.number1, {
        duration: 2, //* 持续时间
      });
      countup1.start();
      const countup2 = new CountUp(countup2Ref.value!, props.number2, {
        duration: 2, //* 持续时间
      });
      countup1.start();
      countup2.start();
    });
相关推荐
乌暮2 分钟前
深入理解 Java 泛型:把「万能盒子」用对、用稳
java·开发语言·后端·学习
行者-全栈开发11 分钟前
【前端/JS框架】CVE-2026-3854:GitHub Enterprise Server X-Stat注入XSS漏洞深度剖析与紧急修复指南
前端·javascript·github
2601_9622186139 分钟前
C语言中三种库的编译和使用方法
开发语言·c++
传奇开心果编程1 小时前
中庸、有容、破执:仓颉编程语言的中华智慧结晶——三重哲学境界思辨
开发语言·华为·开源·软件工程
jimy11 小时前
派生类重写基类虚函数(二):override的作用
开发语言·c++
_upupup1 小时前
异常(C++)
java·开发语言·jvm
霸道流氓气质1 小时前
ComfyUI 图像生成工作流完全指南:从节点编排到Java生产级图像生产实战
java·开发语言·人工智能
怕浪猫2 小时前
2026年金九银十,我面了22个前端
前端·javascript·面试
前端的日常2 小时前
一个人+AI做情侣食谱小程序,30天纯赚
前端·javascript·后端
ShyanZh2 小时前
【Python3基础】13-Python 常用设计模式
开发语言·python·设计模式