vue2中 vue-count-to组件让数字从某个数字动态的显示到某个数字(后附vue3的用法)

1、首先安装

复制代码
 npm install vue-count-to

2、使用

  • 2.1、先导入组件 import countTo from 'vue-count-to'

  • 2.2、注册组件
    components: {
    countTo
    },

  • 2.3、使用组件 <countTo>

结果如下会持续3秒逐渐过渡到100:



vue3中使用

1、先安装:npm install vue3-count-to --save

复制代码
npm install vue3-count-to --save

2、使用

  • 2.1、先导入组件 import { CountTo } from 'vue3-count-to';

  • 2.2、直接使用组件 <count-to :startVal='0' :endVal='100' :duration='3000'>

3、显示结果:

相关推荐
顶级自由人2 小时前
本地正常、线上正常,为什么一个 Hook 仍会报错?
前端·javascript·程序员
lerhxx2 小时前
R3F 第一人称漫游与碰撞检测:Pointer Lock + 不穿墙的滑墙秘诀(中)
前端·javascript·three.js
labixiong2 小时前
button按钮原生开关弹窗,零 JS 搞定80%交互场景
前端·javascript·html
隔岸观火烧连营2 小时前
如何用 WebCodecs 在浏览器里实现高清录屏 —— 无插件、无水印、直接导出 MP4
前端·javascript
Hilaku4 小时前
技术好就能升职是前端圈最大的谎言!
前端·javascript·程序员
光影少年4 小时前
react navite高频手写/实操题
前端·javascript·react native·react.js·前端框架
AI视觉网奇4 小时前
3d子部件高亮选中
开发语言·javascript·3d
阿图灵4 小时前
LangGraph 实战 03:Workflows 与 Agents——六种工作流模式与智能体实战(附 6 个可运行示例)
java·前端·javascript·工作流·ai agent·智能体·langgraph
2603_965896625 小时前
JavaScript 对象零基础详解|属性、方法、遍历、增删改查
开发语言·javascript·ecmascript
用户283209679375 小时前
从进程线程到 async/await:JS Event-loop事件循环机制底层解析
前端·javascript