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

相关推荐
腻害兔13 小时前
【若依项目-产品经理视角】深度拆解 RuoYi-Vue-Pro 框架层:15 个 Starter 到底在干什么?
前端·vue.js·产品经理·ai编程
梦想的旅途213 小时前
JavaScript 实现企业微信消息自动发送的技术实践
运维·javascript·自动化·企业微信
就叫飞六吧14 小时前
子页面和dialog案例
开发语言·javascript·ecmascript
小月土星15 小时前
(实战篇)RAG-demo 深度解析:162行代码中的检索增强生成全景 (含Top-k法)
javascript·数据库·llm
lvchaoq15 小时前
this指向面试代码输出题目合集
javascript·面试·职场和发展
你怎么知道我是队长16 小时前
JavaScript 函数 this 全解
开发语言·javascript·ecmascript
不简说18 小时前
JS 代码技巧 vol.5 — 10 个错误处理套路,从 try/catch 到 Error Boundary
前端·javascript·程序员
wordpress资料库18 小时前
Next.js更适合移动开发 不适合web开发
开发语言·前端·javascript·next.js
李明卫杭州19 小时前
Vue 3 `markRaw` 详解:什么时候该让一个对象"别被代理"
vue.js
用户831348593069819 小时前
Vue+Threejs实现人物奔跑场景
vue.js·webgl·three.js