【工具】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();
    });
相关推荐
Cc.Y14 小时前
Java零基础入门:方法(函数)深度掌握
java·开发语言
老王爱玩车14 小时前
工具函数——清空输入缓冲区
c语言·开发语言·学习
奋发向前wcx14 小时前
CSP-J复赛模拟赛1 王晨旭补题 2026.10.2
java·开发语言
周杰伦fans14 小时前
轻量模型高并发推理优化技巧
开发语言·人工智能·c#
Frank_refuel14 小时前
【C++项目】手撕JRpc框架(单机怎么优化到分布式思想)
开发语言·c++
可乐鸡翅yeah_14 小时前
fmp4 碎片 MP4 格式 HLS 流,和传统 TS 分片有什么不一样
开发语言·javascript·ios·音视频·safari·m3u8·m3u8在线播放
流形填表15 小时前
多校区题库标准化:Excel模板与校验脚本
开发语言·python
步行cgn15 小时前
AOP 通知的类型详解
开发语言
weixin_3077791315 小时前
从“人操作仪器”到“Agent 自主发现”:OPL 金属材料自驱动实验室 MVP 技术论述
开发语言·人工智能·算法·架构
笑鸿的学习笔记15 小时前
C++笔记之SIMD与SSE指令集
开发语言·c++·笔记