【工具】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();
    });
相关推荐
代码不加糖6 分钟前
Proxy能够监听到对象中的对象的引用吗?
开发语言·前端·javascript
charlie11451419112 分钟前
现代C++指南:Lambda,让我们用另一种方式持有函数
开发语言·c++
大家的林语冰21 分钟前
连 Markdown 都不放过,Rust 在前端基建杀疯了,万物皆可“锈化“!
前端·javascript·markdown
想吃火锅100528 分钟前
【前端手撕】instanceof
前端·javascript·原型模式
один but you35 分钟前
const和constexpr常量表达式
java·前端·javascript
qq3621967051 小时前
阿里裁员新消息(2026最新动态汇总)
java·开发语言·前端
.千余1 小时前
【C++】模板进阶全解:非类型参数|全特化|偏特化|分离编译完全指南
开发语言·c++·笔记·学习·其他
代码改善世界1 小时前
【C++进阶】C++11:列表初始化、右值引用与移动语义、完美转发全解析
java·开发语言·c++
scx_link1 小时前
通过git bash在本地创建分支,并推送到远程仓库中
开发语言·git·bash
GZ同学1 小时前
单双变量Ripley’s K函数 R 语言实现
开发语言·r语言