【工具】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();
    });
相关推荐
ct97810 分钟前
组件间的通信
前端·javascript·vue.js
chao18984411 分钟前
SGM(Semi-Global Matching)立体匹配算法 — C++ 实现
开发语言·c++·算法
WiChP19 分钟前
【V0.1B11】从零开始的2D游戏引擎开发之路
开发语言·游戏引擎
10岁的博客39 分钟前
IOI 2018 高速公路收费(Highway)题解:二分与树的巧妙结合
开发语言·c++
左手吻左脸。42 分钟前
Vue 全栈面试题大全(2026 最新版最详细)
前端·javascript·vue.js
不知名的老吴43 分钟前
C++运算符重载的常见注意点
开发语言·c++
弹简特1 小时前
【Java项目-轻聊】07-实现主页面模块
java·开发语言
两个西柚呀1 小时前
js中的同步和异步,三种处理异步任务的方式
前端·javascript
Thecozzy1 小时前
写文档教 AI 用代码
开发语言·python
Hanniel1 小时前
装饰器 (中): 进阶篇,解锁框架级玩法
开发语言·python