vue实现数字的滚动 vue-count-to的应用

最新推荐文章于 2024-08-02 16:57:44 发布

Pluto_ung

最新推荐文章于 2024-08-02 16:57:44 发布

阅读量1.1k

点赞数 1

本文链接：https://blog.csdn.net/yysbeast/article/details/99646881

版权

首先，先安装vue-count-to

npm install vue-count-to

然后，官方的示例如下：

<template>
  <countTo :startVal='startVal' :endVal='endVal' :duration='3000'></countTo>
</template>
 
<script>
  import countTo from 'vue-count-to';
  export default {
    components: { countTo },
    data () {
      return {
        startVal: 0,
        endVal: 2017
      }
    }
  }
</script>

这里的数字是写死的，如果是{{value}}这种数据的话，一开始打算用v-model来，后来发现只需要将:endVal='endVal'这里改为:endVal='value'即可

还有另一个插件叫做vue-countup-v2，可以试一下，反正效果一样