【工具】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();
    });
相关推荐
a3158238066 分钟前
Android 大图显示策略优化显示(二)
android·java·开发语言·javascript·kotlin·glide·图片加载
月明长歌17 分钟前
Java多线程线程池ThreadPoolExecutor理解总结:6 个核心参数 + 4 种拒绝策略(附完整示例)
java·开发语言
冴羽21 分钟前
JavaScript Date 语法要过时了!以后用这个替代!
前端·javascript·node.js
学编程的小鬼24 分钟前
JVM 常见的问题
开发语言·jvm
故事不长丨27 分钟前
C#File文件操作全解析:从基础用法到异常处理
服务器·开发语言·visualstudio·c#·文件操作·io流·file
lowhot31 分钟前
C语言UI框架
c语言·开发语言·笔记·ui
前端小L40 分钟前
专题一:搭建测试驱动环境 (TypeScript + Vitest)
前端·javascript·typescript·源码·vue3
gihigo199841 分钟前
使用MATLAB绘制3D心形图和玫瑰花图案
开发语言·matlab·3d
柠檬叶子C1 小时前
【Python】解决 No module named ‘imp‘ 问题 | Python3 中废弃的 imp 模块
开发语言·python
源代码•宸1 小时前
Golang基础语法(go语言结构体、go语言数组与切片、go语言条件句、go语言循环)
开发语言·经验分享·后端·算法·golang·go