vue-countTo是一个无依赖,轻量级的vue组件,可以自行覆盖easingFn。

你可以设置 startVal 和 endVal,它会自动判断计数或倒计时。支持vue-ssr。vue-countTo参考于countUp.js;

安装使用:

npm install vue-count-to

例子:

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

使用CDN脚本: demo

选项

Property Description type default
startVal 开始值 Number 0
endVal 结束值 Number 2017
duration 持续时间,以毫秒为单位 Number 3000
autoplay 自动播放 Boolean true
decimals 要显示的小数位数 Number 0
decimal 十进制分割 String .
separator 分隔符 String ,
prefix 前缀 String ''
suffix 后缀 String ''
useEasing 使用缓和功能 Boolean true
easingFn 缓和回调 Function

** 注意:当autoplay:true时,它将在startVal或endVal更改时自动启动**

功能

Function Name Description
mountedCallback 挂载以后返回回调
start 开始计数
pause 暂停计数
reset

重置countTo

更多例子:demo

vue-countTo---简单好用的一个数字滚动插件的更多相关文章

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

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

  2. jQuery 数字滚动插件

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

  3. vue入门--简单嵌套路由的一个路径小问题

    假设现在有一个项目,刚进去要显示main页面下的contorl页面,那么路由里面的初级路由应该是{main和err},这两个是同一级,然后{control和set}是main下的子路由,foot是这两 ...

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

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

  5. Countup.js:vue-countup-v2(npm)数字滚动插件

    1.官方地址:http://inorganik.github.io/countUp.js/ 2.官方demo: 3.参数说明: params——start(开始数字).end(结束数字).decima ...

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

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

  7. Cocos2d-x-Lua 开发一个简单的游戏(记数字步进白色块状)

    Cocos2d-x-Lua 开发一个简单的游戏(记数字步进白色块状) 本篇博客来给大家介绍怎样使用Lua这门语言来开发一个简单的小游戏-记数字踩白块. 游戏的流程是这种:在界面上生成5个数1~5字并显 ...

  8. 使用ant design vue的日历组件,实现一个简单交易日与非交易日的切换

    使用ant design vue的日历组件,实现一个简单交易日与非交易日的切换 需求: 日历区分交易日.非交易日 可以切换面板查看整年交易日信息 可以在手动调整交易日.非交易日 演示实例 序--使用软 ...

  9. Vue.js大屏数字滚动翻转效果

    ================================ 大屏数字滚动翻转效果来源于最近工作中element后台管理页面一张大屏的UI图,该UI图上有一个模块需要有数字往上翻动的效果,以下是最 ...

随机推荐

  1. TensorFlow 常用函数与方法

    摘要:本文主要对tf的一些常用概念与方法进行描述. tf函数 TensorFlow 将图形定义转换成分布式执行的操作, 以充分利用可用的计算资源(如 CPU 或 GPU.一般你不需要显式指定使用 CP ...

  2. Deepin linux 远程桌面无法被Ubuntu连接

    linux下远程桌面的工具还是有很多的,这个方法主要是解决Ubuntu自带的 Remmina无法远程 Deepin 桌面. 1.安装vncserver的基础服务,输入以下命令: sudo apt-ge ...

  3. 第一次连接数据库mongodb踩的坑

    类型匹配错误,参数要写对了,name与age一一对应. 如果没找到错误就把异常打印出来. await person.save(function(err) { if(err) console.log(e ...

  4. Angular记录(2)

    文档资料 箭头函数--MDN:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/Arrow_fun ...

  5. 第七节:Trigger(SimpleTrigger、CronTrigger)哑火(MisFire)策略 :

    一. 简介 1. 什么是哑火 由于某些原因导致触发器(trigger)在该触发的时候没有得到触发,后续对应的解决策略即为哑火策略.(个人理解) 2. 哑火触发的条件 ①:所有的工作线程都在忙碌,导致某 ...

  6. django - 总结 - 用户认证组件

    用户认证组件 from django.contrib import auth 从auth_user表中获取对象,没有返回None,其中密码为密文,使用了加密算法 user = auth.authent ...

  7. 51nod 1423 最大二“货” 单调栈

    利用单调栈,高效求出每个区间内的最大值和次大值的亦或值. 先正向扫描,利用单调递减栈,若当前栈为空栈,则直接压入栈中,若为非空栈,弹出栈顶元素,每弹出一个元素,则求一次亦或值,保留最大值 接着进行反向 ...

  8. DeepLearning.ai学习笔记(五)序列模型 -- week1 循环序列模型

    一.为什么选择序列模型 序列模型可以用于很多领域,如语音识别,撰写文章等等.总之很多优点... 二.数学符号 为了后面方便说明,先将会用到的数学符号进行介绍. 以下图为例,假如我们需要定位一句话中人名 ...

  9. Android WebView重定向问题的解决方案

    当WebView在加载网页时,有时会有重定向问题,返回键回退怎么也回退不掉,怎么办? WebView有一个getHitTestResult():返回的是一个HitTestResult,一般会根据打开的 ...

  10. 有了GPRS为什么还要LoRa和NB-IoT?【转】

    转自:https://blog.csdn.net/i_am_Banmei2/article/details/81869724 与其说是GPRS和NB-IoT的比较,不如说是传统网络与新兴网络的比较,我 ...