vue实现数字滚动效果

vue-count-to 组件

来吧，跟着姐的步伐：

1、装依赖：

npm install vue-count-to --save

2、引入：

import CountTo from "vue-count-to" 

3、注册组件：在components中注册， components: { CountTo }

<script>
  export default {
    name: "home",
    components: {  // 注册组件
      CountTo,
    },
  };
</script>

4、写入组件

<countTo style="color: #e52e3b; font-size: 30px" :startVal="startVal" :endVal="endVal" :duration="duration" :decimals="decimals"> </countTo>

5、注册变量

<script>
  export default {
    name: "home",
    data() {
      return {
        startVal: 0, // 初始值
        endVal: 12345, //最终值
        duration: 1300, //需要滚动的时间
        decimals: 2, //保留小数位数
      };
    },
  };
</script>