【工具】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();
    });
相关推荐
邂逅星河浪漫8 分钟前
【银行内网开发-管理端】Vue管理端+Auth后台开发+Nginx配置+Linux部署(详细解析)
linux·javascript·css·vue.js·nginx·html·前后端联调
techdashen13 分钟前
Rust项目公开征测:Cargo 构建目录新布局方案
开发语言·后端·rust
星空椰14 分钟前
JavaScript 进阶基础:函数、作用域与常用技巧总结
开发语言·前端·javascript
奔跑的呱呱牛15 分钟前
@giszhc/vue-page-motion:Vue3 路由动画怎么做才“丝滑”?(附在线示例)
前端·javascript·vue.js
忒可君24 分钟前
C# winform 自制分页功能
android·开发语言·c#
Rust研习社28 分钟前
Rust 智能指针 Cell 与 RefCell 的内部可变性
开发语言·后端·rust
leaves falling1 小时前
C++模板进阶
开发语言·c++
坐吃山猪2 小时前
Python27_协程游戏理解
开发语言·python·游戏
gCode Teacher 格码致知2 小时前
Javascript提高:小数精度和随机数-由Deepseek产生
开发语言·javascript·ecmascript
椰猫子2 小时前
Javaweb(Filter、Listener、AJAX、JSON)
java·开发语言