vue中数字自动增长工具vue-countupjs

vue中数字自动增长工具vue-countupjs

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

1.安装vue-countupjs

npm install vue-countupjs --save

2.使用

App.vue引入vue-countupjs

import VueCountUp from 'vue-countupjs'

注册组件

export default {
	components: { VueCountUp }
}

在你想用的地方创建VueCountUp标签

<div>
	<VueCountUp :start-value="0" :end-value="middleValue2.value1" :duration="1"/>
</div>

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