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

相关推荐
moMo5 分钟前
# JavaScript 的“等等我”:聊聊同步与异步
javascript
Cobyte10 分钟前
19.Vue Vapor 的实现原理原来这么简单
前端·javascript·vue.js
JackieDYH11 分钟前
uniapp vue3 常用的生命周期和作用使用时机
javascript·vue.js·uni-app
hhb_61838 分钟前
TypeScript泛型实战:企业级请求封装全解析
javascript·ubuntu·typescript
BomanGe21 小时前
NSK直线导轨LH55EL与NH55EM替代指南
前端·javascript·数据库·经验分享·规格说明书
云水一下1 小时前
Vue.js从零到精通系列(四):前端路由与Vue Router——打造多页单页应用
前端·javascript·vue.js
baozj1 小时前
把徒步轨迹做成 3D 地形模型:开源工具「印迹 TrailPrint 3D」
前端·vue.js·github
Momo__1 小时前
alien-signals — 驱动 Vue 3.6 响应式引擎的那个 1KB 库
前端·vue.js·响应式编程
用户83134859306981 小时前
Vue3+Cesium实现3DTiles模型实时调节(离地面高度/xyz轴旋转/模型经纬度偏移)
vue.js·cesium
zhedream1 小时前
Vue 3 Teleport 报错实录:从 patch 时机到 `defer` 属性
前端·vue.js