【工具】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();
    });
相关推荐
Mininglamp_27181 分钟前
Claude Code 封禁中国开发者之后:本地 AI 编程工具的替代方案实测
开发语言·人工智能·windows·开源软件·ai-native
思麟呀12 分钟前
C++17(三)if constexpr+折叠表达式
开发语言·c++
醉城夜风~13 分钟前
Java详解经典算法题:接雨水(三种实现方案+原理剖析)
java·开发语言·算法
qydz1122 分钟前
杰理开发基础知识(3)
开发语言·嵌入式开发·杰理科技
贾斯汀frank23 分钟前
C# 15 类型系统改进:Union Types
开发语言·windows·c#
阿里嘎多学长35 分钟前
2026-07-10 GitHub 热点项目精选
开发语言·程序员·github·代码托管
CHNE_TAO_EMSM43 分钟前
Android studio 打开文件时自动下载源码
前端·javascript·android studio
CHHH_HHH1 小时前
【C++11】深入解析C++可变参数模板
开发语言·c++·算法·stl·c++11
竹林8183 小时前
从 ethers.js 迁移到 Viem:一个签名验证 Bug 让我彻底放弃旧爱
javascript
jimy13 小时前
C语言模拟对象、方法:“函数指针+结构体“复用函数指针指向的函数体
c语言·开发语言