乐趣区

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

退出移动版