Vue 实现数字滚动 animate-number

在vue中，为了要实现数字滚动显示的效果，尝试了使用jquery代码，但是效果只能在html中展示，在vue中多次尝试还是没有效果。

 

研究过后，发现，vue中带有一种数字滚动。animate-number

效果： 动态效果（0-200）

 

动态数字效果案例: https://wangdahoo.github.io/vue-animate-number

使用方法：

安装对应插件：

 npm install vue-animate-number

安装完后，main.js下写入

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

之后，就可以在需要的vue页面中引用

 <animate-number
      from="0" 
     :to="today"
      duration="2000" 
      easing="easeOutQuad"
     from-color="#44CC00" 
  to-color="#ec4949"
      style="font-size:30px;text-align:center;display:block;"></animate-number>

today为我需要的数据值，写在本页面的data中

 

 API相关设置

 

 

<animate-number 
  mode="auto"
  duration="1000"
  :from="from" 
  :to="to"
  from-color="#44CC00" 
  to-color="#ec4949"
  :formatter="formatter" 
  :animate-end="animateEnd">
</animate-number>

相关属性值解释