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

相关推荐
变与不变80638 分钟前
防抖节流详解
开发语言·前端·javascript
用户66026761187943 分钟前
HTTP 200,页面仍是旧状态:定位一次前后端字段错配
javascript
用户72526496629691 小时前
浏览器为什么加载不了超大图片
前端·javascript
OpsEye1 小时前
企业 AI 治理到底管什么:预算、权限、会话、效能四个维度
javascript·ai编程
破烂三角裤2 小时前
Vue 3 自动生成汉字拼音:pinyin-pro、Ruby 标签
vue.js
顽疲2 小时前
java vue springboot 养老系统源码详解:退住 care_out 审批结算与腾床事务实践
java·vue.js·spring boot·vue养老·springboot养老·java养老
雪芽蓝域zzs2 小时前
第 10 节:地图点击逆地理编码(点击地图获取经纬度 + 地址)
vue.js
斯内普吖2 小时前
(开源)线上花店系统实战指南 基于 Java + SSM + Vue + MySQL
java·vue.js·mysql·开源
keyipatience3 小时前
JS学习笔记(2)数组,函数,作用域,对象
前端·javascript·笔记·学习·html
donk13143 小时前
React Native for OpenHarmony 实战:三方库 react-native-segmented-control-tab 的鸿蒙化适配指南
javascript·react native·react.js·华为·harmonyos