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

相关推荐
计算机毕设定制辅导-无忧学长41 分钟前
《基于Vue的流浪动物救助中心管理系统的设计与实现》
java·vue.js·spring boot·流浪动物救助中心管理系统
Hilaku1 小时前
为什么死磕 1px 的团队,用户体验反而更差?
前端·javascript·程序员
雪芽蓝域zzs1 小时前
第25章:地图下钻交互(点击省份,切换到对应省份城市地图)
vue.js·echars
陈拉斯1 小时前
给公司年会写了个大屏抽奖系统:动画在前端跑,凭什么说结果没被改?
javascript
daols882 小时前
vue 甘特图组件 vxe-gantt 自动计算工期显示关键路径
vue.js·vxe-gantt
—Qeyser2 小时前
Element Plus 安装与配置指南 (Vue 3 + Vite + TS)
vue.js
雪芽蓝域zzs2 小时前
第19章:ECharts 组合图(折线 + 柱状混合图,双 Y 轴)
vue.js·echars
yzy852 小时前
Vue中下载或打开文件的JavaScript方法
前端·javascript·vue
用户298698530142 小时前
在 React 中用 JavaScript 将 Word 转换为文本
前端·javascript·react.js
雪芽蓝域zzs2 小时前
第17章:ECharts 饼图自定义样式(扇区颜色、轮廓、标签配置 + 空状态兼容)
vue.js·echars