vue-countupjs的使用

vue-countupjs的前身就是countup.js专门用于做数字增长的动画，满足一些展示型数字的使用.
使用流程
1. 安装vue-countupjs

npm install vue-countupjs --save

2. 项目中如何使用

<template><div><VueCountUp :start-value="0" :end-value="middleValue2.value1" :duration="1"/></div>
</template>
<script>
import VueCountUp from 'vue-countupjs' //引入
export default {components: { VueCountUp }
}
<script/>

3. 组件的属性配置

属性	意义	默认值
tag	数字的包装器	span
startValue	起始值	0
endValue	结束值	0
decimals	小数位数，默认为 0	0
duration	动画持续时间，默认为 2 s	2
delay	延时更新时间, 0 为不延时	0
immediate	是否立即执行动画	true
options	countup配置项	下图代码
animateClass	执行期间动画, 执行后删除，优先级低于animatedClass	null
animatedClass	执行前插入, 执行后删除	animated

options：{useEasing: true, // 缓动动画 easinguseGrouping: true, // 1,000,000 vs 1000000separator: ',', // 数字分隔符decimal: '.', // 小数分隔符prefix: '', // 前缀suffix: '' // 后缀
}

简单的引用便可实现上图效果

vue中如何展现快速增长数字的动画相关推荐

Vue中gsap库实现数字递增动画
效果图如下代码如下: <template><div class="app"><input type="number" step= ...
Vue中实现文字向上滚动的动画效果
在Vue中,想要实现文字向上滚动的效果,分成两种情况: 1 无缝滚动无缝滚动如图: 我说的无缝滚动主要是指两点: 滚动中没有停顿从头至尾再循环播放时没有停顿实现这种情况可以使用CSS3的动画实现 ...
vue中显示和隐藏如何做动画_vue-State Transitions（状态转换）
Vue的过渡系统提供了许多简单的方法来动画进入,离开和列表,但动画数据本身又如何呢?例如: 数字和计算显示颜色 SVG节点的位置元素的大小和其他属性所有这些都已经存储为原始数字或可以转换为数字. ...
vue中如何实现滚动页面的动画-animate.css和wow.js
两种方法: 第一种方法:npm安装包animate.css和wow.js 第二种方法:静态资源的引入第一种方法: 1.引入静态资源包静态资源包,需要注意的是.必须放到static文件夹下面 < ...
如何在Vue中使用lottie加载SVG动画
背景最近刚搞完官网,是时候分享一波我在码官网过程中遇到的一些小困难.当然,我会分享一些比较重点的内容.现在网页上比较复杂的动画基本都采用 SVG,像 Ant Design 全家桶的官网,首页的 Ba ...
Vue中使用vue-count-to（数字滚动插件）
1. 简单介绍 npm官网:vue-count-to vue-count-to 就是一个组件插件,咱们引入进来,可以去打印一下,它就是一个组件实例,使用components注册一下,就可以在模板中使用 ...
uniapp，vue中h5项目实现数字密码键盘
本来原生的h5 直接input type="password" 这样会发现也不是说不能输入数字. 只是让用户多了一步操作的切换到数字的情况才能输入. 不知道安卓手机如何反正苹 ...
vue中怎样实现弹出层动画效果？由上而下渐渐显示---封装成复用组件
子组件: <template><div class="home"><!-- 首先将要过渡的元素用transition包裹,并设置过渡的name --& ...
vue中怎样实现弹出层动画效果？由上而下渐渐显示
1 <template><div class="home"> ...

vue中如何展现快速增长数字的动画

vue-countupjs的使用

vue中如何展现快速增长数字的动画相关推荐

最新文章

热门文章