vue-count-To实时更新数据

vue-count-to是一个vue数据滚动组件，在之前大屏项目中使用到了，这里来记录下如何实时更新下数据。

vue-count-to其中有三个参数要用到的，

startVal开始值，

endVal结束值，

duration动画时间，

挂载以后返回回调的方法

mountedCallback()

思路：

刚开始设置一个startVal值0,通过服务端返回的数据设置结束值，在mountedCallback()回调方法里，当动画结束后duration时间，把开始值设置为返回的结束值。watch监听数据变化把开始值startVal设置为结束值endVal.

<countTo    :startVal="startVal"    :endVal="endVal"    :duration="6000"    @mountedCallback="mountedCallback" ></countTo>


export default {
  data(){
    startVal:0,
    endVal:0
 },
mounted(){
 this.endVal =200
},
watch(){
  endVal(val){
  this.startVal =val
 }
},
methods:{
   mountedCallback(){
     setTimeout(()=>{
      this.startVal =this.endVal
     },6000)
   }
 }
}