【工具】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();
    });
相关推荐
@老蝴20 分钟前
Java EE - 线程安全的产生及解决方法
java·开发语言·java-ee
没有bug.的程序员1 小时前
Spring Cloud Alibaba 生态总览
java·开发语言·spring boot·spring cloud·alibaba
快乐非自愿2 小时前
Java垃圾收集器全解:从Serial到G1的进化之旅
java·开发语言·python
树在风中摇曳2 小时前
Java 静态成员与继承封装实战:从报错到彻底吃透核心特性
java·开发语言
芳草萋萋鹦鹉洲哦5 小时前
【Windows】tauri+rust运行打包工具链安装
开发语言·windows·rust
权泽谦5 小时前
R Shiny 交互式网页实战:从零到上线可视化应用
开发语言·信息可视化·r语言
hweiyu005 小时前
Go Fiber 简介
开发语言·后端·golang
ᐇ9598 小时前
Java LinkedList集合全面解析:双向链表的艺术与实战
java·开发语言·链表
码银8 小时前
【数据结构】顺序表
java·开发语言·数据结构
Python私教9 小时前
Python 开发环境安装与配置全指南(2025版)
开发语言·python