VUE数字滚动插件（简单版）

最新推荐文章于 2025-11-11 12:43:12 发布

原创最新推荐文章于 2025-11-11 12:43:12 发布 · 1.5k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#js #vue

本文介绍如何在Vue项目中使用vue-countTo组件实现在页面上数字从初始值平滑滚动到最终值的效果。通过安装并引入vue-countTo，设置startVal、endVal和duration属性，即可轻松创建动态数字展示。

如何在页面上实现数字从初始值滚动到最终值？

这就需要在vue项目中引入vue-countTo，这是一个无依赖，轻量级的vue组件。

安装引入方式：

npm install vue-count-to  //安装引入

使用：

<template>
  <countTo :startVal="a" :endVal="b" :duration="3000"></countTo>
</template>

<script>
      import countTo from "vue-count-to";  //引入
      export default {
          name: "",
          components: {
              countTo
           }
          data(){
          return{
             a:0,
             b:2020
           }
          }
      }
</script>