数字滚动插件‘vue-count-to’应用详解

一、使用npm安装

npm install vue-count-to

二、在需要使用的页面中引用vue-count-to

下面是全部代码

<template>
    <div>
        <countTo
        :startVal="startVal"
        :endVal="endVal"
        :duration="duration"
        :autoplay="autoplay"
        :decimals="decimals"
        :decimal="decimal"
        :separator="separator"
        :prefix="prefix"
        :suffix="suffix"
        :useEasing="useEasing"
        >
        </countTo>
    </div>
</template>

<script>
      import countTo from 'vue-count-to'
    
      export default{
        components: {
          countTo
        },
        data(){
          return{
            startVal: 0, // 开始值
            endVal: 1000, // 结束值
            duration: 3000, // 持续时间，毫秒
            autoplay: false, // 是否自动播放
            decimals: 0, // 要显示的小数位数
            decimal: '.' , // 十进制分隔符
            separator: ',' , // 分隔符
            prefix: '' , // 前缀
            suffix: '' , // 后缀
            useEasing: true , // 使用缓和功能
          }
        },
        methods: {
         
        }
      }
</script>

三、 vue-count-to配置项