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

评论