【VUE】数字动态变化到目标值-vue-count-to

SZnA1

已于 2024-11-01 10:45:13 修改

阅读量944

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js javascript 前端

于 2023-08-25 14:10:19 首次发布

本文链接：https://blog.csdn.net/liusuihong919520/article/details/132494507

vue-count-to是Vue的一个组件，用于创建从起始值到结束值的计数动画。通过npm安装并配置在模板和脚本中使用，支持自定义时长。官方提供GitHub仓库和Demo供参考。

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

Vue2

【VUE2适用】vue-count-to是一个Vue组件，用于实现数字动画效果。它可以用于显示从一个数字到另一个数字的过渡动画。

插件名：vue-count-to

官方仓库地址：GitHub - PanJiaChen/vue-countTo: It's a vue component that will count to a target number at a specified duration https://panjiachen.github.io/countTo/demo/

官方Demo地址：vue-count-to

使用方式：

1.npm install vue-count-to

2.在要使用的页面中：

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

Vue3

【VUE3适用】

https://github.com/jizai1125/vue-countup-v3插件名：vue-countup-v3

官方仓库地址：https://github.com/jizai1125/vue-countup-v3

官方Demo地址：https://jizai1125.github.io/vue-countup-v3/examples/

使用方式：

1.npm i vue-countup-v3

2.在要使用的页面中：

<script setup lang="ts">
  import { ref } from 'vue'
  import CountUp from 'vue-countup-v3'
  import type { ICountUp, CountUpOptions } from 'vue-countup-v3'
  
  const endValueRef = ref(2022.22)
  // coutup.js options
  const options: CountUpOptions = {
    separator: '❤️'
    // ...
  }
  let countUp: ICountUp | undefined
  const onInit = (ctx: ICountUp) => {
    console.log('init', ctx)
    countUp = ctx
  }
  const onFinished = () => {
    console.log('finished')
  }
</script>

<template>
  <count-up 
    :end-val="endValueRef"
    :duration="2.5"
    :decimal-places="2"
    :options="options"
    :loop="2"
    :delay="2"
    @init="onInit"
    @finished="onFinished"></count-up>
</template>