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

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, // 缓动动画 easing
  useGrouping: true, // 1,000,000 vs 1000000
  separator: ',', // 数字分隔符
  decimal: '.', // 小数分隔符
  prefix: '', // 前缀
  suffix: '' // 后缀
}

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