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代码:

<i-count-up
:start="0"
:end="total"
:decimals="0"
:duration="2.5"
:options="options"
></i-count-up>
import ICountUp from 'vue-countup-v2'

export default {
name: 'dashboard',
data () {
return {
options: {
useEasing: true,
useGrouping: true,
separator: ',',
decimal: '.',
prefix: '',
suffix: ''
},
total: 100
}
}
}

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. 卡内操作系统COS

    https://wenku.baidu.com/view/dbaa94916bec0975f465e2e8.html 智能卡与cos技术简析: http://www.360doc.com/conten ...

  2. 洛谷P3379 【模板】最近公共祖先(LCA)(dfs序+倍增)

    P3379 [模板]最近公共祖先(LCA) 题目描述 如题,给定一棵有根多叉树,请求出指定两个点直接最近的公共祖先. 输入输出格式 输入格式: 第一行包含三个正整数N.M.S,分别表示树的结点个数.询 ...

  3. 洛谷P3768 简单的数学题(莫比乌斯反演+狄利克雷卷积+杜教筛)

    传送门 不会…… 两篇加在一起都看不懂…… https://www.cnblogs.com/cellular-automaton/p/8241128.html https://www.luogu.or ...

  4. EOS 主节点同步

    一.从github克隆主网代码仓库 git clone https://github.com/EOSIO/eos --recursive 二.编译与安装EOS环境 cd ~/eos ./eosio_b ...

  5. King's Pilots

    题目链接   (双层图, 一层维护工作,一层维护政策) #include <bits/stdc++.h> using namespace std; inline int read() { ...

  6. day6作业详解

    1.day6题目 1,老男孩好声⾳选秀⼤赛评委在打分的时候呢, 可以进⾏输入. 假设, 老男孩有10个评委. 让10个评委进⾏打分, 要求, 分数必须⼤于5分, 小于10分. 电影投票. 程序先给出⼀ ...

  7. VxWorks实验八 信号

    实验八信号1 实验目的1.学习使用信号2 实验内容在实验一建立的 project 中,编写一段信号处理程序,将其与SIGINT 相关连,使用kill()发送SIGINT 信号并调用信号处理程序.观察运 ...

  8. [TCP/IP]TCP的三次握手和四次挥手

    概述 总结一下TCP中3次握手过程,以及其原生的缺陷 引起的SYN Flood的介绍 1.TCP连接建立--三次握手 几个概念: seq:序号,占4个字节,范围[0,4284967296],由于TCP ...

  9. Linux —— ps命令

    Ps命令 作用 显示瞬间进程的状态,并不动态连续: 如果想对进程进行实时监控应该用top命令: 对进程的管理,可以使用kill命令发送信号 Ps PID : 运行着的命令的进程编号 TTY : 命令所 ...

  10. Atcoder AGC016 E Poor Turkeys

    比赛的时候口胡这道题口胡了一年,看完题解被教做人 题意:有n只火鸡,m个猎人按序来杀火鸡,从自己预先选的两只中杀一只,问有多少火鸡对可以同时存活 考虑对于每一只火鸡i,按时间逆序维护一个最小的集合Si ...