【工具】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();
    });
相关推荐
良木生香4 分钟前
【C++初阶】STL—— Stack & Queue 从入门到精通:容器适配器、迭代器与经典面试题
java·开发语言·c++·算法·zookeeper
lbb 小魔仙12 分钟前
Python 性能分析工具实战:cProfile、memory_profiler、line_profiler 使用指南
开发语言·python
小小晓.16 分钟前
C++小白记:vector
开发语言·c++·算法
晓得迷路了24 分钟前
栗子前端技术周刊第 138 期 - NestJS 12、Astro 7.1、npm 12...
前端·javascript·nestjs
小刘学技术27 分钟前
AI人工智能决策树分类器:原理、实现与应用
开发语言·人工智能·python·算法·决策树·机器学习·数据挖掘
脱胎换骨-军哥28 分钟前
C++ 嵌入式编程实例:从寄存器操作到底层驱动开发
开发语言·c++·驱动开发
霸道流氓气质41 分钟前
摄像头视频预览实现教程:从原理到落地(ZLMediaKit+ flv.js+ Spring Boot)
javascript·spring boot·音视频
鱼子星_1 小时前
【C++】vector
开发语言·c++·笔记·stl
double_eggm1 小时前
uniapp.3
开发语言·前端·javascript
白玉cfc1 小时前
熟悉Objective-C
开发语言·ios·objective-c