vue-countTo---简单好用的一个数字滚动插件
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---简单好用的一个数字滚动插件的更多相关文章
- vue-count-to(简单好用的一个数字滚动插件)
vue-count-to是一个无依赖,轻量级的vue组件,可覆盖easingFn. 1. 你可以设置两个属性startVal和endVal,它会自动判断计数或倒计时.支持vue-ssr.vue-cou ...
- jQuery 数字滚动插件
这几天闲来没事写的,有不对的地方还请多多指点 CSS: ; padding:0 2px;} .digital-beating i {;; background:url(../images/icon_0 ...
- vue入门--简单嵌套路由的一个路径小问题
假设现在有一个项目,刚进去要显示main页面下的contorl页面,那么路由里面的初级路由应该是{main和err},这两个是同一级,然后{control和set}是main下的子路由,foot是这两 ...
- 非常好用的vue数字滚动插件vue-countTo
参考链接:https://blog.csdn.net/gaoxin666/article/details/84635056
- Countup.js:vue-countup-v2(npm)数字滚动插件
1.官方地址:http://inorganik.github.io/countUp.js/ 2.官方demo: 3.参数说明: params——start(开始数字).end(结束数字).decima ...
- 那些H5用到的技术(6)——数字滚动特效
前言原理源码使用方式补充CountUp.js 前言 会有这么一种情况,H5页面需要进行数字统计展示,以此来强调产品or工作的成果.如果只是静态显示一个数字,总是感觉生硬.对比如下: 是不是瞬间高大上了 ...
- Cocos2d-x-Lua 开发一个简单的游戏(记数字步进白色块状)
Cocos2d-x-Lua 开发一个简单的游戏(记数字步进白色块状) 本篇博客来给大家介绍怎样使用Lua这门语言来开发一个简单的小游戏-记数字踩白块. 游戏的流程是这种:在界面上生成5个数1~5字并显 ...
- 使用ant design vue的日历组件,实现一个简单交易日与非交易日的切换
使用ant design vue的日历组件,实现一个简单交易日与非交易日的切换 需求: 日历区分交易日.非交易日 可以切换面板查看整年交易日信息 可以在手动调整交易日.非交易日 演示实例 序--使用软 ...
- Vue.js大屏数字滚动翻转效果
================================ 大屏数字滚动翻转效果来源于最近工作中element后台管理页面一张大屏的UI图,该UI图上有一个模块需要有数字往上翻动的效果,以下是最 ...
随机推荐
- Error creating bean with name
最近在学一个东西,要使用SSM新建一个案例,是这样滴,我有如下 DeptDAO DeptService DeptServiceImpl DeptController Dept Mybatis 首先,我 ...
- Iterate over slices of a string
def iter_slices(string, slice_length): """Iterate over slices of a string."" ...
- cnblogs鼠标点击特效
喜大普奔! 伸手党福利 ! 创建mouse.js文件, 上传到博客, 直接引用即可, 内容如下: (function(window, document, undefined) { var hearts ...
- Angular7
1.绑定html 在ts里面自定义一个html变量 html = '<a> 这是html变量 </a> '; 在html打印出来 直接打印:{{html}} <br /& ...
- python3 字典常见用法总结
python3 字典常见用法总结 Python字典是另一种可变容器模型,且可存储任意类型对象,如字符串.数字.元组等其他容器模型. 一.创建字典 字典由键和对应值成对组成.字典也被称作关联数组或哈希表 ...
- day3-->深浅拷贝
import copy #浅拷贝 #copy.copy() #深拷贝 #copy.deepcopy() #赋值 #a = '123' #b = a a1 = 123123 a2 = 123123 #查 ...
- Windows密钥容器和证书的关系
其实CSP主要是对容器里的密钥对操作的,和证书关系不大. 容器里的密钥对有两种类型:一种是AT_KEYEXCHANGE,表示加密的密钥对,一种是AT_SIGNATURE表示签名的密钥对. 由于美国的出 ...
- C语言学习及应用笔记之四:C语言volatile关键字及其使用
在C语言中,还有一个并不经常使用但却非常有用的关键字volatile.那么使用volatile关键字究竟能干什么呢?接下来我将就此问题进行讨论. 一个使用volatile关键字定义变量,其实就是告诉编 ...
- Java框架之spring框架的优点,为什么要学习spring框架
为什么要学习Spring的框架a: 方便解耦,简化开发 Spring就是一个大工厂,可以将所有对象创建和依赖关系维护,交给Spring管理 b:AOP编程的支持 Spring提供面向切 ...
- Flask开发微电影网站(六)
1. 后台管理登录功能实现 1.1 后台管理页面登录表单LoginForm 在app的admin目录下创建forms.py文件,用来保存admin蓝图中需要使用到的表单 from flask_wtf ...