【工具】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();
    });
相关推荐
励志不掉头发的内向程序员18 分钟前
【LibreCAD 2D架构】从鼠标点击到图形创建:RS_ActionDrawLine交互流程与状态机解析
开发语言·c++·qt·学习·系统架构·计算机外设·交互
雪芽蓝域zzs30 分钟前
第三十二节:部门组织管理(el‑tree 组织树
前端·javascript·vue.js
www_aiyuanma_vip33 分钟前
Java个人博客系统
java·开发语言
leoZ23138 分钟前
第 7 篇:进阶——校验、联动、列表页
开发语言·前端·javascript·vue.js·人工智能·目标检测·ecmascript
VeryCool40 分钟前
别吹了,依赖图像识别的GPT‑6 Astra永远快不起来
前端·javascript·aigc
luj_176843 分钟前
虚实交融中的真实人物塑造
c语言·开发语言·网络·经验分享·算法
haolin123.1 小时前
STL vector底层揭秘:从构造到迭代器失效
开发语言·c++·算法
大模型码小白1 小时前
ChatGPT 的回答也能被结构化抓取?AI Bot Scraper 对比测评
服务器·开发语言·数据库·人工智能·spring·chatgpt
尘中远1 小时前
给C++工业软件搭建 Agent
开发语言·c++·qt·ai·agent
AC赳赳老秦1 小时前
农产品公开数据应用:OpenClaw 抓取农产品价格、产销公开数据,实现农产品行情动态监测
java·c语言·javascript·python·php·deepseek·openclaw