【工具】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();
    });
相关推荐
YIAN23 分钟前
LangChain JS 工具调用实战:基于 DeepSeek-V4-Flash 实现本地文件读取 AI 代码助手(完整可运行源码)
javascript·langchain·前端框架
尼斯湖皮皮怪30 分钟前
iceCoder 记忆系统深度分析
前端·javascript
爸爸6191 小时前
07 ArkTS 基础类型与接口定义:从 TypeScript 到鸿蒙的类型升级
javascript·华为·typescript·harmonyos·鸿蒙系统
李燚2 小时前
Go 项目怎么组织:DDD 4 层 vs MVC vs 脚本式
开发语言·golang·mvc·ddd·agent框架·eino
默_笙2 小时前
🌏 MCP 是 AI 界的 USB-C:一个协议让所有模型都能用上所有工具
前端·javascript
2zcode2 小时前
免费开源项目文档:基于MATLAB图像处理的啤酒瓶口缺陷检测系统设计与实现
开发语言·图像处理·matlab
人工智能时代 准备好了吗2 小时前
AI回答内容进入率监测:引用识别、文本匹配与语义判断
开发语言·人工智能·python
LONGZETECH2 小时前
新能源汽车动力电池检测仿真教学系统:C/S 分层架构与数字化实训落地全解析
大数据·c语言·开发语言·人工智能·架构·系统架构·汽车
郝学胜-神的一滴2 小时前
中级OpenGL教程 013:渲染器类架构设计与逐帧渲染流程详解
开发语言·c++·unity·游戏引擎·图形渲染·opengl·unreal
Metaphor6923 小时前
使用 Python 冻结 Excel 文件中的行、列和单元格
开发语言·python·excel