【工具】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();
    });
相关推荐
wzg19690226wzg3 分钟前
rust 学习 泛型
开发语言·学习·rust
techdashen5 分钟前
Rust 基础设施团队 2025 Q4 回顾与 2026 Q1 计划
开发语言·后端·rust
红宝村村长5 分钟前
torch.autograd.Function.apply()
开发语言·python
AI科技星6 分钟前
《数术工坊:非欧射影录》类型:硬核光影·几何本源
c语言·开发语言·网络·量子计算·agi
何以解忧,唯有..14 分钟前
Python 中的继承机制:从基础到高级用法详解
java·开发语言·python
IMPYLH35 分钟前
HTML 的 <a>元素
前端·javascript·html
绵绵细雨中的乡音1 小时前
监控显示一切正常,可用户根本打不开网站——Blackbox Exporter帮我找到了真相(1)
开发语言·php
c++之路1 小时前
CMake 系列教程(五):进阶技巧
c语言·开发语言·c++
ZengLiangYi1 小时前
本地向量数据库选型:vectra vs chroma vs hnswlib
javascript·数据库·后端
踏着七彩祥云的小丑1 小时前
Go学习第5天:变量作用域 + 数组 + 指针
开发语言·学习·golang·go