vue实现数字滚动增加效果

数字滚动增加效果，增加到指定数字停下

第一步：下载

npm install vue-count-to

第二部：引入，注册组件

<script>
import countTo from 'vue-count-to';
export default {
components:{
  countTo
}
};
</script>

第三步：选一个你需要滚动数字的位置放组件，然后把数字改一下。就完事了

<p class="alone">昨日合格率：<countTo :startVal='0' :endVal='90' :duration='2000' suffix='%' :decimals="2"></countTo></p>

响应式数字：可以后面用变量，然后再data中声明两个，这样就可以通过js动态添加数据进入变量，然后动态响应

:startVal='startVal' :endVal='endVal'

<template>
  <countTo :startVal='startVal' :endVal='endVal' :duration='3000'></countTo>
</template>
<script>
//直接引入组件'vue-count-to'
  import countTo from 'vue-count-to';
  export default {
  //注册组件
    components: { countTo },
    data () {
      return {
      //数字开始
        startVal: 0,
       //数字结束
        endVal: 50000
      }
    }
  }
</script>

配置项