【工具】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();
    });
相关推荐
新鲜势力呀12 小时前
PHP 实战:第三方接口经常超时怎么办?从API调用优化到服务稳定性完整方案
开发语言·php
艾莉丝努力练剑12 小时前
【AI大模型接入SDK】ChatSDK:CMake构建静态库完整实现
java·开发语言·网络·c++·人工智能·学习·sdk
百度一下吧12 小时前
umi后台管理项目实战:从工程搭建到生产构建
java·前端·javascript
haerapi13 小时前
仓库拣货路线不只靠最短边:S 形启发式的反例记录
android·开发语言·javascript
时间的拾荒人13 小时前
Qt 显示类控件详解:从 QLabel 到 QCalendarWidget 的实战指南
开发语言·qt·面试
事圆则缓13 小时前
Flutter 状态管理框架对比(六):同一个购物车,四种方案怎么落地?
前端·javascript·flutter
.道阻且长.13 小时前
C++11 :右值引用的作用,引用折叠和完美转发
java·开发语言·c++
code2cat13 小时前
Java进阶篇之StampedLock:先读取,再校验,必要时退回读锁
java·开发语言
5008413 小时前
React Native for OpenHarmony 实战:三方库 react-native-torch 的鸿蒙化适配指南
javascript·react native·react.js·harmonyos
阿里嘎多学长13 小时前
2026-09-30 GitHub 热点项目精选
开发语言·程序员·github·代码托管