Vue的数字滚动效果

Vue的数字滚动

1. 安装插件npm install vue-count-to，重新运行：npm run dev
2. 全局安装 main.js:

   import countTo from 'vue-count-to
   Vue.use(countTo)
   

3. 相应的页面下：
   写入template：

   <template>
   <count-to :startVal='lastPersonNum' :endVal='nextPersonNum' :duration='2000'></count-to>
   </template>
   

   写入到script

   	<script>
   	import countTo from 'vue-count-to'
   	comments: {countTo},
    	data () {
      		 return {
       	 	realtimePerson: 0,
        	 	lastPersonNum: 0,
         	 	nextPersonNum: 0
       	 }
    	}
   </script>
   

4．Ajax获取处理data

	       if (parseInt(data) <= 0) {
	          this.realtimePerson = 10 //数据初始化
	          this.lastPersonNum = this.realtimePerson  //数据初始化
	          this.nextPersonNum = this.realtimePerson  //数据初始化
	        } else {
	          this.lastPersonNum = this.realtimePerson //上一次的数据存储
	          this.realtimePerson = parseInt(data) + 80 //实时数据获取
	          this.nextPersonNum = this.realtimePerson //实时数据存储
	        }