实现数字自增效果

最新推荐文章于 2023-11-22 14:01:45 发布

codealiang

最新推荐文章于 2023-11-22 14:01:45 发布

阅读量175

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_44941576/article/details/132309260

版权

实现数字的自增效果

在可视化项目中，经常需要对数据总览中的数据实现自增的效果，这是如何实现的呢?

我们可以借助countup.js这个包来实现

在这里插入图片描述
使用方法

1.下载

npm i --save countup.js@2.6.2

2.在js中使用

//先引入
import { CountUp } from 'countup.js'
//获取到dom之后使用
onMounted(() => {
  new CountUp(totalCountTarget.value, props.data.total).start()
  new CountUp(city1.value, props.data.hb).start()
  new CountUp(city2.value, props.data.db).start()
  new CountUp(city3.value, props.data.hd).start()
  new CountUp(city4.value, props.data.zn).start()
  new CountUp(city5.value, props.data.xn).start()
  new CountUp(city6.value, props.data.xb).start()
})