vue-count-to数字动效自增长

最新推荐文章于 2025-02-23 22:18:13 发布

左又

最新推荐文章于 2025-02-23 22:18:13 发布

阅读量1k

点赞数

分类专栏： vue 文章标签： Vue.js 数字动画插件 vue-count-to 前端开发

本文链接：https://blog.csdn.net/qq_29715077/article/details/124865674

版权

vue 专栏收录该内容

11 篇文章

订阅专栏

本文介绍了轻量级Vue数字插件vue-count-to的使用方法，包括安装、基本用法及参数设置。该插件支持设置动画时间、数字格式和自定义回调方法等功能，适用于创建动态数字展示效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

可以设置动画时间、数字分隔符、数字小数点、数字起始值的轻量vue数字插件，demo如下：

http://panjiachen.github.io/countTo/demo/

1、安装依赖

npm install vue-count-to

2、使用

<template>
  <countTo ref="myNum" :startVal="startVal" :endVal="endVal" :duration="3000"></countTo>
</template>

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

3.参数

属性	描述
`startVal`	开始值
`endVal`	结束值
`duration`	持续时间，以毫秒为单位
`autoplay`	自动播放
`decimals`	要显示的小数位数
`decimal`	十进制分割
`separator`	分隔符
`prefix`	前缀
`suffix`	后缀
`useEasing`	使用缓和功能
`easingFn`	缓和回调