关于vue.js:vue使用vueanimatenumber动态展示数字

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模板中应用

<animate-number from="19999999":to="to" duration="10000" v-if="toshow" class="canimate"></animate-number>

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.本期的分享到了这里就完结啦,心愿对你有所帮忙,让咱们一起致力走向巅峰。