【工具】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 分钟前
【JAVA 进阶】SpringMVC全面解析:从入门到实战的核心知识点梳理
java·开发语言·spring boot·spring·spring cloud·java-ee·springmvc
2301_789015626 分钟前
C++:二叉搜索树
c语言·开发语言·数据结构·c++·算法·排序算法
帅那个帅1 小时前
PHP里面的抽象类和接口类
开发语言·php
咖啡の猫7 小时前
Python字典推导式
开发语言·python
leiming67 小时前
C++ vector容器
开发语言·c++·算法
SystickInt8 小时前
C语言 strcpy和memcpy 异同/区别
c语言·开发语言
CS Beginner8 小时前
【C语言】windows下编译mingw版本的glew库
c语言·开发语言·windows
FJW0208148 小时前
Python_work4
开发语言·python
多看书少吃饭9 小时前
从Vue到Nuxt.js
前端·javascript·vue.js
大学生资源网9 小时前
java毕业设计之儿童福利院管理系统的设计与实现(源码+)
java·开发语言·spring boot·mysql·毕业设计·源码·课程设计