1、官方地址:http://inorganik.github.io/countUp.js/

2、官方demo:

3、参数说明:

params——start(开始数字)、end(结束数字)、decimals(小数位数)、duration(持续时间)

options——useEasing(设置宽松)、useGrouping(是否使用千位分隔符)、separator(千位分隔符)、decimal(小数点分隔符)、prefix(前缀符)、suffix(后缀符,可以加单位)

methods——start(开始)、pause/resume(暂停/重新开始)、reset(重置)、update(更新到该值)

4、vue代码:

  1. <i-count-up
  2. :start="0"
  3. :end="total"
  4. :decimals="0"
  5. :duration="2.5"
  6. :options="options"
  7. ></i-count-up>
  1. import ICountUp from 'vue-countup-v2'
  2.  
  3. export default {
  4. name: 'dashboard',
  5. data () {
  6. return {
  7. options: {
  8. useEasing: true,
  9. useGrouping: true,
  10. separator: ',',
  11. decimal: '.',
  12. prefix: '',
  13. suffix: ''
  14. },
  15. total: 100
  16. }
  17. }
  18. }

Countup.js:vue-countup-v2(npm)数字滚动插件的更多相关文章

  1. vue-countTo---简单好用的一个数字滚动插件

    vue-countTo是一个无依赖,轻量级的vue组件,可以自行覆盖easingFn. 你可以设置 startVal 和 endVal,它会自动判断计数或倒计时.支持vue-ssr.vue-count ...

  2. jQuery 数字滚动插件

    这几天闲来没事写的,有不对的地方还请多多指点 CSS: ; padding:0 2px;} .digital-beating i {;; background:url(../images/icon_0 ...

  3. vue-count-to(简单好用的一个数字滚动插件)

    vue-count-to是一个无依赖,轻量级的vue组件,可覆盖easingFn. 1. 你可以设置两个属性startVal和endVal,它会自动判断计数或倒计时.支持vue-ssr.vue-cou ...

  4. vue 实现 多个 数字滚动增加动效

    参考网上其他同学写的 具体出处忘了,不然一定贴上,有问题请联系. 图一是具体js代码:二是设置定时器:三是dom节点需要写ref numberGrow (ele) { this.summaryData ...

  5. 非常好用的vue数字滚动插件vue-countTo

    参考链接:https://blog.csdn.net/gaoxin666/article/details/84635056

  6. FullPage.js 活动单页 - 全屏滚动插件

    插件描述:fullPage.js 是一个基于 jQuery 的插件,它能够很方便.很轻松的制作出全屏网站. https://www.uedsc.com/fullpage.html 官网 如今我们经常能 ...

  7. 那些H5用到的技术(6)——数字滚动特效

    前言原理源码使用方式补充CountUp.js 前言 会有这么一种情况,H5页面需要进行数字统计展示,以此来强调产品or工作的成果.如果只是静态显示一个数字,总是感觉生硬.对比如下: 是不是瞬间高大上了 ...

  8. jquery轻量级数字动画插件jquery.countup.js

    插件描述: jquery.countup.js 是一款轻量级jquery数字动画插件.该数字动画插件可以在页面滚动时,将指定的数字从0开始计数增加动画. 插件说明 jquery.countup.js  ...

  9. Parallax.js – 自适应智能设备方向的视差效果插件

    Parallax.js 是一个简单的,轻量级的的视差引擎,能够对智能设备的方向作出反应.在没有没有陀螺仪或运动检测硬件可用的时候,使用光标的位置来代替.有很多的行为,你就可以设置为任何给定的视差实例. ...

随机推荐

  1. css3文字与字体的相关样式

    给文字添加阴影——text-shadow属性 text-shadow属性是css2中定义的,在css2.1中删除了,在css3中恢复text-shadow:length length length c ...

  2. linux c二级指针的内存分配和使用

    #include <stdio.h>#include <stdlib.h>#include <string.h>#include <unistd.h> ...

  3. 在windows10环境下给PHPStorm配置xdebug断点调试功能

    笔者的开发环境: wampserver2.5系统环境包 操作系统:windows10 64位专业版. php版本:php5.512 Apache版本:2.49 好了下面介绍,phpstorm配置xde ...

  4. 自动化测试 Cucumber

    Cucumber是一个能够理解用普通语言描述的测试用例的支持行为驱动开发(BDD)的自动化测试工具,用Ruby编写,支持Java和.Net等多种开发语言. Cucumber 三大组成: Feature ...

  5. GridSearchCV.grid_scores_和mean_validation_score报错

    目录 GridSearchCV.grid_scores_和mean_validation_score报错 0. 写在前面 1. 问题描述和解决过程 2. 不想比比直接看结果部分 GridSearchC ...

  6. oracle merge 目标表以及源表存在重复列的问题(转)

    SQL> select * from t_source;                                                                      ...

  7. 洛谷P3884 二叉树问题

    题目描述 如下图所示的一棵二叉树的深度.宽度及结点间距离分别为: 深度:\(4\) 宽度:\(4\)(同一层最多结点个数) 结点间距离: \(⑧→⑥为8 (3×2+2=8)\) \(⑥→⑦为3 (1× ...

  8. PAT甲级——1110 Complete Binary Tree (完全二叉树)

    此文章同步发布在CSDN上:https://blog.csdn.net/weixin_44385565/article/details/90317830   1110 Complete Binary ...

  9. [SDOI2013]随机数生成器

    Description Input 输入含有多组数据,第一行一个正整数T,表示这个测试点内的数据组数. 接下来T行,每行有五个整数p,a,b,X1,t,表示一组数据.保证X1和t都是合法的页码. 注意 ...

  10. Codeforces 1175E(倍增)

    要点 与cf 1168C相似的一点都是看某点x最远能拓展到哪里 看数据想要在logn内查询,考虑倍增步数 const int maxn = 2e5 + 5, X = 5e5 + 5, LOG = 25 ...