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>

相關屬性值解釋