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

相关推荐
默_笙8 分钟前
🔑 让 AI 学会"读"网页:我用 Cheerio 爬了一篇掘金文章,然后切成小块存进了向量库
前端·javascript
方方洛37 分钟前
AI 教程系列-TUI 应用开发教程14-技能系统与可扩展性
前端·javascript·typescript
方方洛41 分钟前
AI 教程系列-TUI 应用开发教程05-大模型对话界面设计
前端·javascript·typescript
方方洛1 小时前
AI 教程系列-TUI 应用开发教程08-流式响应与动画
前端·javascript·typescript
方方洛1 小时前
AI 教程系列-TUI 应用开发教程04-第一个 TUI 应用
前端·javascript·typescript
周全全1 小时前
2kol七月限时彩蛋开源领取
javascript
方方洛2 小时前
AI 教程系列-TUI 应用开发教程03-TUI 框架与技术选型
前端·javascript·ui kit
可触的未来,发芽的智生2 小时前
发现-元认知技能,激起神经符号系统跃变
javascript·人工智能·python·程序人生·自然语言处理
你怎么知道我是队长2 小时前
JavaScript的自适应效果
开发语言·javascript·ecmascript
shmily麻瓜小菜鸡3 小时前
前端“伪防盗链”方案
前端·javascript·vue.js·bootstrap·echarts