Countup.js：vue-countup-v2（npm）数字滚动插件

Bertha 。 2021-12-11 12:31 425阅读 0赞

1、官方地址：[http://inorganik.github.io/countUp.js/][http_inorganik.github.io_countUp.js]

2、官方demo：

![1074523-20190517145728255-655828441.png][]

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
          }
        }
    }

转载于:https://www.cnblogs.com/dreamsqin/p/10881361.html

[http_inorganik.github.io_countUp.js]: http://inorganik.github.io/countUp.js/
[1074523-20190517145728255-655828441.png]: /images/20211211/dc64f30f7a344f6db6788098aa3cecdb.png

发表评论取消回复

表情：

评论列表（有 0 条评论，425人围观）

还没有评论，来说两句吧...

相关阅读

相关 npm 安装删除插件

npm安装模块【npm install xxx】利用 npm 安装xxx模块到当前命令行所在目录；【npm install \-g xxx】利用npm安装全局模块

客官°小女子只卖身不卖艺/ 2023年06月15日 13:27/ 0 赞/ 1 阅读

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

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

小咪咪/ 2022年12月27日 08:44/ 0 赞/ 215 阅读

相关 vue-count-to数字滚动计数插件

插件地址：[vue-count-to插件地址][vue-count-to] 安装 npm install vue-count-to 使用 <

逃离我推掉我的手/ 2022年11月01日 05:44/ 0 赞/ 242 阅读

相关 vue-countup-v2（npm）数字滚动插件

vue-countup-v2: [https://github.com/xlsdg/vue-countup-v2][https_github.com_xlsdg_vue-cou

墨蓝/ 2022年10月19日 04:20/ 0 赞/ 407 阅读

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

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

﹏ヽ暗。殇╰゛Y/ 2022年10月07日 15:51/ 0 赞/ 154 阅读

相关 Bootstrap滚动监听插件

滚动监听插件，即自动更新导航插件，会根据滚动条的位置自动更新对应的导航目标。其基本实现是随着滚动，基于滚动条的位置向导航栏添加.active。 1.用法（1）通过da

你的名字/ 2022年08月23日 09:55/ 0 赞/ 316 阅读

相关 marquee插件水平滚动字幕循环滚动

效果图： ![这里写图片描述][SouthEast] demo及插件下载链接： [http://download.csdn.net/download/vlilyv/

今天药忘吃喽~/ 2022年06月10日 13:24/ 0 赞/ 229 阅读

相关在Vue中使用vue-count-to（数字滚动）插件

vue-count-to 是什么？ vue-count-to 它是一个vue组件，将在指定的持续时间内计入目标数 vue-count-to 怎么使用？

不念不忘少年蓝@/ 2021年12月16日 00:33/ 0 赞/ 2354 阅读

相关 Countup.js：vue-countup-v2（npm）数字滚动插件

1、官方地址：[http://inorganik.github.io/countUp.js/][http_inorganik.github.io_countUp.js] 2、

Bertha 。/ 2021年12月11日 12:31/ 0 赞/ 426 阅读

相关滚动插件better-scroll

这几天学习vue看到一个不错的滚动插件 better-scroll 可以达到手机原生滚动的效果官网：[http://ustbhuangyi.github.io/bette

亦凉/ 2021年10月19日 07:31/ 0 赞/ 622 阅读