【工具】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();
    });
相关推荐
大可不必了2 小时前
03 函数定义和调用
开发语言·python
I_belong_to_jesus2 小时前
C++关于分支预测的优化1
开发语言·c++·算法
承渊政道3 小时前
【Python编程—从入门到实践】(记分与闯关:用Python+Pygame,打造越战越精彩的太空大战!)
开发语言·python·pycharm·游戏程序·pygame
爱学习的程序媛3 小时前
Python常用框架梳理
开发语言·后端·python·ai·web·后端框架·python框架
eggwyw4 小时前
Anaconda安装卸载的详细流程指南
开发语言·python
用户0044729538255 小时前
练歌镜:让眼镜听懂“循环这一句”
javascript
yuyuxun18 小时前
协同过滤的校园二手物品智能推荐系统的设计与实现 毕业设计-附源码40082
javascript·vue.js·spring boot·python·数据分析·django·课程设计
another heaven9 小时前
【C/C++ Ranges 是零开销抽象吗?拆开管道、惰性求值和编译期膨胀】
c语言·开发语言·c++
SomeOtherTime10 小时前
Rust 闭包语法和原理(AI回答)
开发语言·后端·rust
apcipot_rain10 小时前
C++转Java日记(10)
java·开发语言