【工具】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();
    });
相关推荐
吴声子夜歌36 分钟前
Vue3——Vue实例与数据绑定
前端·javascript·vue.js
wjs20241 小时前
JavaScript 条件语句
开发语言
阿里加多1 小时前
第 1 章:Go 并发编程概述
java·开发语言·数据库·spring·golang
2301_792674862 小时前
java学习day29(juc)
java·开发语言·学习
周末也要写八哥2 小时前
MATLAB R2025a超详细下载与安装教程(附安装包)
开发语言·matlab
blog_wanghao3 小时前
基于Qt的串口调试助手
开发语言·qt
挖稀泥的工人3 小时前
AI聊天界面的布局细节和打字跟随方法
前端·javascript·面试
竹林8183 小时前
从“连接失败”到丝滑登录:我用 ethers.js 连接 MetaMask 的完整踩坑记录
前端·javascript
颜酱4 小时前
图片大模型实践:可灵(Kling)文生图前后端实现
前端·javascript·人工智能
Reart4 小时前
从0解构tinyWeb项目--(Day:2)
javascript·后端·架构