当前位置: 首页 > news >正文

Vue-CountUp-V2 数字滚动动画库

安装:

$ npm install --save countup.js vue-countup-v2

示例如下:

<template><div class="iCountUp"><ICountUp:delay="delay":endVal="endVal":options="options"@ready="onReady"/></div>
</template><script type="text/babel">
import ICountUp from 'vue-countup-v2';export default {name: 'demo',components: {ICountUp},data() {return {delay: 1000,endVal: 120500,options: {useEasing: true,useGrouping: true,separator: ',',decimal: '.',prefix: '',suffix: ''}};},methods: {onReady(instance, CountUp) {const that = this;instance.update(that.endVal + 100);}}
};
</script><style scoped>
.iCountUp {font-size: 12em;margin: 0;color: #4d63bc;
}
</style>

delay [Number]
可选;

endVal [Number]
必须; 你想到达的指定值

options [Object]
可选;

http://www.lryc.cn/news/368682.html

相关文章:

  • C语言详解(文件操作)1
  • Python Requests库详解
  • Kafka 详解:全面解析分布式流处理平台
  • RabbitMQ系列-rabbitmq无法重新加入集群,启动失败的问题
  • postgresql之翻页优化
  • 小白学Linux | 日志排查
  • Spring6
  • 数字孪生概念、数字孪生技术架构、数字孪生应用场景,深度长文学习
  • 云服务对比:阿里云国际站和阿里云国内站有什么区别
  • 如何在npm上发布自己的包
  • SQL Chat:从SQL到SPEAKL的数据库操作新纪元
  • jmeter性能优化之mysql配置
  • VueRouter3学习笔记
  • 「前端+鸿蒙」鸿蒙应用开发-TS函数
  • python后端结合uniapp与uview组件tabs,实现自定义导航按钮与小标签颜色控制
  • mingw如何制作动态库附python调用
  • Vue学习|Vue快速入门、常用指令、生命周期、Ajax、Axios
  • Python基础教程(八):迭代器与生成器编程
  • Oracle10.2.0.1冷备迁移之_数据文件拷贝方式
  • 智能合约中外部调用漏洞
  • 转型AI产品经理(4):“认知负荷”如何应用在Chatbot产品
  • 【C++11】常见的c++11新特性(一)
  • 牛客周赛 Round 46 题解 C++
  • 9.3 Go 接口的多态性
  • Java通过字符串字段匹配形成树形结构
  • 数字孪生智慧水利:精准管理与智能决策的新时代
  • 基于ChatGLM3的本地问答机器人部署流程
  • 归并排序——逆序数对的统计
  • 基于截图和模拟点击的自动化压测工具开发(MFC)
  • 力扣每日一题 6/10