vue数字滚动动画

方法1

<template>
<div style="text-align: center;" class="countRunning">
        {{ oldValue }}
      </div>
</<template> 
<script>
export default {
  data () {
  return {
    oldValue : 0,
    newVlaue:20,
  }
}
mounted(){
	this.timer();
},
methods: {
    //金额变动动画
    timer(){
	    let that = this;
	    let timer = setInterval(function() {
	      if (that.oldValue < that.nowValue) {
	        that.oldValue++;
	      } else {
	        clearInterval(timer);
	      }
	    }, 60);
    }
  }
}

方法2.vue-count-to
转载：https://blog.csdn.net/gaoxin666/article/details/84635056

npm install vue-count-to

<template>
  <countTo :startVal='startVal' :endVal='endVal' :duration='duration'></countTo>
</template>
 
<script>
  import countTo from 'vue-count-to';
  export default {
    components: { countTo },
    data () {
      return {
        // 需要滚动的时间
        duration: 5000,
        // 初始值
        startVal: 0,
        // 最终值
        endVal: 2018
      }
    }
  }
</script>