【工具】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();
    });
相关推荐
ikoala4 分钟前
Codex 不得不装的 12 个插件,都在这了
前端·javascript·后端
skywalk816310 分钟前
记录段言的开发过程
开发语言·学习·编程
未若君雅裁18 分钟前
JVM 垃圾回收器全景与G1深度解析
java·开发语言·jvm
霸道流氓气质19 分钟前
Java 大数据量异步处理方案:线程池 vs 消息队列
java·开发语言
devilnumber19 分钟前
想真正吃透 + 灵活运用 Java 代理模式
java·开发语言·代理模式
AC赳赳老秦24 分钟前
OpenClaw 助力技术面试:自动生成面试题、模拟面试、整理面试知识点
开发语言·python·面试·职场和发展·自动化·deepseek·openclaw
刘科领26 分钟前
修改jdk 第一步: 仓库以及构建(jdk17)
java·开发语言
C+-C资深大佬33 分钟前
C++ 中的 constexpr与 const区
java·开发语言·c++
仙俊红37 分钟前
Java 单例模式:类里面为什么可以有自己类型的字段?
java·开发语言·单例模式
_Evan_Yao42 分钟前
面向对象实战:用 Java/Python 设计一个简单的“怪物战斗”小游戏
java·开发语言