vue使用vue-animate-number动态展示数字

1.开发环境 vue+vue-animate-number
2.电脑系统 windows10专业版
3.在使用 vue开发的过程中,我们经常会使用一些插件来实现一些效果,下面我来分享一下是如何使用vue来实现动态展示数字。
4.废话不多说,直接上操作:

//安装 vue-animate-number插件
npm install vue-animate-number

5.在main.js中引入

import Vue from 'vue'
import VueAnimateNumber from 'vue-animate-number'
Vue.use(VueAnimateNumber)

6.在vue模板中使用

7.配置参数

prop name	type	description	default	require
mode	string	auto or manual, trigger animation immediately or not	auto	N
from	number	value, at which animate starts	-	Y
to	number	value, at which animate ends	-	Y
fromColor	string	start color for gradient, in hex format	-	N
toColor	string	end color for gradient, in hex format	-	N
formatter	Function	value formatter for number in every step during the animation	parseInt	N
animateEnd	Function	callback after animation	-	N

8.本期的分享到了这里就结束啦,希望对你有所帮助,让我们一起努力走向巅峰。