Vue 2.0使用Vue-count-to给数字添加增长动画

在开发后台管理系统时,时常会遇到数据汇总,为了页面展示更生动,用户体验更好,通常会对汇总的数字加一个逐步递增动画。

实现这个效果一般是用的 Vue-count-to这个插件,这是一款简单好用的一个数字滚动插件,并且是一个无依赖,轻量级的组件。

1. 安装插件

npm install vue-count-to --save

2. 使用插件

引入组件

import countTo from 'vue-count-to';

注册组件

components: { countTo },

代码示例

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

3. 相关配置

可以通过修改相关的配置,来完成数字个性化的需求。

如果要对数字进行控制,需要使用挂载回调函数。

注意:当属性为autoplay为true时,该回调函数将在startVal或endVal更改时自动启动。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/19877.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

HTML5 视频 Vedio 标签详解

HTML5 引入了 <video> 标签&#xff0c;允许开发者在网页中直接嵌入视频文件&#xff0c;而不需要依赖第三方插件。本文将全面介绍 <video> 标签的各种属性&#xff0c;并通过实例代码详细说明其用法。 一、基础用法 1. 基本结构 HTML5 中使用 <video> 标…

达梦数据库修改兼容模式设置

达梦数据库兼容模式设置及服务管理操作手册 1. 查询兼容模式 在达梦数据库中&#xff0c;可以通过以下 SQL 查询当前兼容模式&#xff1a; SELECT para_name, para_value FROM v$dm_ini WHERE para_name COMPATIBLE_MODE;2. 设置兼容模式 使用 sp_set_para_value 函数设置…

如何申请微信支付0.2%-0.3%的手续费优惠? 详细步骤

随着微信支付在日常交易中的普及&#xff0c;许多商家开始关注如何降低支付手续费的问题。近期&#xff0c;微信支付推出了一项新的费率优惠政策&#xff0c;允许商家享受0.2%-0.3%的费率优惠。这一政策无疑为商家带来了实质性的成本节约。那么&#xff0c;商家如何申请这一费率…

Oracle RAC 集群配置共享目录ACFS

Oracle RAC 集群配置共享目录ACFS 应用场景&#xff1a;创建的ACFS文件系统用于部署OGG做数据同步使用。 1、创建共享磁盘组 create diskgroup OGG external redundancy disk /dev/mapper/ASM08, /dev/mapper/ASM09; 2、创建 acfs 文件系统 ACFS文件系统 在ASM磁盘组中通过A…

开源还是闭源这是一个问题

天行健&#xff0c;君子以自强不息&#xff1b;地势坤&#xff0c;君子以厚德载物。 每个人都有惰性&#xff0c;但不断学习是好好生活的根本&#xff0c;共勉&#xff01; 文章均为学习整理笔记&#xff0c;分享记录为主&#xff0c;如有错误请指正&#xff0c;共同学习进步。…

线性数据结构-数组

数组&#xff1a;线性数据结构&#xff08;一维数组结构&#xff09; 线性的数据结构强调存储和顺序 数组在内存存储空间上是连续的&#xff0c;并且长度固定不可变更 数组扩容 因为数组定长&#xff0c;当想往长度为8的数组中添加第九个元素时&#xff0c;操作系统会开辟一段…

如何在 c++ 里,让子类访问到父类的私有数据成员?答案之一:使用第三方友元类或友元函数

看 STL 库的代码时候&#xff0c;见有这种写法&#xff0c;感觉挺神奇的。故简化逻辑后&#xff0c;写个玩具验证一下。本来这是很别扭的做法。既然父类让数据成员私有了&#xff0c;还要让子类去调用&#xff0c;何苦呢&#xff1f;但看大师们的写法&#xff0c;果然 c 编译器…

LAMMPS - 分子动力学模拟器

本文翻译自&#xff1a;https://www.lammps.org/ 文章目录 一、关于 LAMMPS下载作者R&D 100 二、LAMMPS 亮点毛细血管中的血流 一、关于 LAMMPS 官网&#xff1a; https://www.lammps.org/ github &#xff1a;https://github.com/lammps/lammps LAMMPS 分子动力学模拟器…

上位机图像处理和嵌入式模块部署(f103 mcu定时器配置)

【 声明&#xff1a;版权所有&#xff0c;欢迎转载&#xff0c;请勿用于商业用途。 联系信箱&#xff1a;feixiaoxing 163.com】 在mcu开发过程当中&#xff0c;有一种开发模式用的比较多&#xff0c;那就是中断while&#xff08;1&#xff09;。这里面的中断&#xff0c;又是以…

【mysql数据库】mycat中间件

MyCat 简介 Mycat 是数据库 中间件 。 1、 数据库中间件 中间件 是一类连接软件组件和应用的计算机软件&#xff0c; 以便于软件各部件之间的沟通 。 例子 Tomcat web 中间件 。 数据库 中间件 连接 java 应用程序和数据库 2、 为什么要用 Mycat ① Java 与数据库紧耦合 …

关于各种儿童竞赛的小讨论

大家好&#xff0c;我是阿赵。   在过去的一个周末&#xff0c;连续两天&#xff0c;我儿子都代表学校参加了小学组的竞赛&#xff0c;分别是GoC编程竞赛和小小科学家的化学竞赛。   我儿子今年4年级&#xff0c;在这读小学的4年里面&#xff0c;他加入过很多所谓的“校队”…

【Linux】操作系统之冯诺依曼体系

&#x1f389;博主首页&#xff1a; 有趣的中国人 &#x1f389;专栏首页&#xff1a; Linux &#x1f389;其它专栏&#xff1a; C初阶 | C进阶 | 初阶数据结构 小伙伴们大家好&#xff0c;本片文章将会讲解 操作系统中 冯诺依曼体系 的相关内容。 如果看到最后您觉得这篇文…

数据仓库应该用什么方案——数据仓库实施方案概述

数据仓库的设计和实施是一个复杂的过程&#xff0c;通常需要根据具体的企业需求和资源来确定最佳的方案。以下是一个详细的数据仓库实施方案概述&#xff0c;但请注意&#xff0c;由于数据仓库的具体实现细节可能因技术栈、业务需求和数据源的不同而有所变化&#xff0c;因此我…

jsp实验19 File

三、源代码以及执行结果截图&#xff1a; readJSPFile.jsp <% page contentType"text/html" %> <% page pageEncoding "utf-8" %> <% page import"java.io.*"%> <style> #tom{ font-family:宋体;font-size:2…

基于Chisel语言的FPGA流水灯程序

目录 一、 内容概要二、 Chisel介绍三、 Chisel的使用四、 流水灯实现五、 心得体会六、 参考链接 一、 内容概要 Chisel介绍Chisel使用流程Chisel流水灯实操 二、 Chisel介绍 Chisel 是一种构建硬件描述语言&#xff08;HDL&#xff09;的高级编程语言&#xff0c;它允许硬…

盘点我们班的一些梗

六一儿童节马上就要到了&#xff0c;祝大家六一快乐哇&#xff01;今天就来盘点我们班的一些梗。 1.鲁滨逊一个&#xff0c;星期五两个 这个梗源自苏联拍的《鲁宾逊漂流记》&#xff0c;鲁滨逊对星期五说&#xff1a;“现在我们需要更多面包&#xff0c;因为我们有两个人。”…

指纹浏览器大全

具体请前往&#xff1a;国内外指纹浏览器大全

脚本编程游戏引擎的挑战与解决方案

哈喽呀&#xff0c;大家好&#xff0c;淼淼又来和大家见面啦&#xff0c;许多行业内的小伙伴们都知道脚本编程游戏引擎在游戏开发中扮演着越来越重要的角色。然而&#xff0c;脚本编程游戏引擎的开发和运行过程中往往会面临许多挑战和问题。这一期淼淼将带大家一起探讨脚本编程…

师彼长技以助己(2)产品思维

师彼长技以助己&#xff08;2&#xff09;产品思维 前言 我把产品思维称之为&#xff1a;人生底层的能力以及蹉跎别人还蹉跎自己的能力&#xff0c;前者说明你应该具备良好产品思维原因&#xff0c;后者是你没有好的产品思维去做产品带来的灾难。 人欲即天理 请大家谈谈看到这…