【工具】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();
    });
相关推荐
朝阳58113 小时前
Cesium `Camera.flyTo`:“飞过去“
javascript
IsSh9nj6q14 小时前
Python全栈应用搭建神器magic-dash .新版本介绍
开发语言·python·dash
Cachel wood14 小时前
hands-on-modern-rl:动手学强化学习策略梯度reinforce
开发语言·python
蓝斯49714 小时前
一碰即传,重构跨设备文件分享体验
开发语言·python·重构
宁风NF14 小时前
JavaScript:内存、垃圾回收、性能优化
开发语言·前端·javascript·学习·性能优化·es6
ShuiShenHuoLe15 小时前
Go html/template 使用入门
开发语言·golang·html
geovindu15 小时前
java: Gale-Shapley Algorithm
java·开发语言·后端·算法
午安~婉15 小时前
挑战二:博客预览卡片
前端·javascript·html
冻柠檬飞冰走茶15 小时前
PTA基础编程题目集 7-34 通讯录的录入与显示(C语言实现)
c语言·开发语言·数据结构·算法