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、显示结果:

相关推荐
sugar__salt9 分钟前
基于Prompt的NLP项目实战:ES6模块化落地开发指南
javascript·自然语言处理·prompt·es6
小雨下雨的雨12 分钟前
通过鸿蒙PC Electron框架技术完成-井字棋游戏 - 实现详解
前端·javascript·游戏·华为·electron·鸿蒙
冰暮流星24 分钟前
javascript建立对象之构造函数
开发语言·javascript·ecmascript
xkxnq1 小时前
第八阶段:工程化、质量管控与高级拓展(130天),Vue端到端测试:Cypress自动化测试(登录流程+表单提交+页面跳转)
前端·vue.js·flutter
小雨下雨的雨1 小时前
基于鸿蒙PC Electron框架技术完成的五子棋游戏 - 技术实现详解
前端·javascript·游戏·华为·electron·鸿蒙
老毛肚1 小时前
jeecgboot vue API 拆分02
前端·javascript·vue.js
ZC跨境爬虫1 小时前
跟着 MDN 学JavaScript day_4:如何存储你需要的信息——变量
开发语言·前端·javascript·ui·ecmascript
VcB之殇1 小时前
[Three.js] 实现两个3D模型之间的粒子化切换
前端·javascript·three.js
ZC跨境爬虫1 小时前
跟着 MDN 学JavaScript day_6:JavaScript 中的基础数学——数字与运算符
开发语言·前端·javascript·学习·ecmascript
sugar__salt10 小时前
从栈队列数据结构到JS原型面向对象全解
前端·javascript·数据结构