【工具】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();
    });
相关推荐
程序员大阳3 分钟前
副队长JavaScript教程(56)-DOM之表单操作
javascript·dom·表单操作
Dxy123931021635 分钟前
JS AES加密详解
开发语言·javascript·ecmascript
信息安全失业大专人员43 分钟前
每日了解一个智能体-WorkBuddy
开发语言·ai·c#·智能体
4ever.ov01 小时前
精学C++第一站 从命名空间到引用:C++入门核心语法全梳理(13000字长文)
开发语言·c++·clion
小杨互联网1 小时前
Go 现代 CLI 工具离线镜像合集
开发语言·后端·golang·开源·go·命令行
揽星河..1 小时前
【C语言】数组
c语言·开发语言·算法
FRing031 小时前
JavaScript入门到精通三十三(异常处理、call方法、apply方法、bind方法、防抖、节流)
开发语言·前端·javascript
geovindu1 小时前
rust: Semaphore Pattern
开发语言·后端·设计模式·rust·代理模式·企业级信号量模式·同步型模式
纪念 2292 小时前
C++ 算法(模拟)
开发语言·c++·算法
niucloud-admin2 小时前
NIUCLOUD PHP SAAS上门家政使用文档--服务订单:评价列表
开发语言·php