vue3-count-to实现数字动态增长效果

vue3-count-to 是一个用于 Vue 3的数字计数动画库,常用于在页面上实现数字的动态增长效果,类似于从某个起始值渐变到目标值的效果。它可以用来显示各种数字、统计数据或展示动画效果。

1 安装 vue3-count-to

首先,你需要安装 vue3-count-to 包:

npm install vue3-count-to

或者使用 yarn:

yarn add vue3-count-to

二 属性

vue3-count-to 提供了一些常用的属性来控制动画效果:

  • start-val: 起始值(默认为 0)。
  • end-val: 目标数字(必选项)。
  • duration: 动画时长(单位:毫秒),控制从起始值到目标值的过渡时间。
  • prefix: 设置数字的前缀。
  • suffix: 设置数字的后缀。
  • decimals: 设置数字的小数位数(默认为 0)。
  • decimal: 设置小数点分隔符。
属性描述类型默认值
startVal起始值Number0
endVal结束值Number2017
duration持续时间(以毫秒为单位)Number3000
autoplay自动播放Booleantrue
decimals分割小数Number0
decimal设置小数点分隔符String.
separator分隔符String,
prefix前缀String‘’
suffix后缀String‘’

三 案例

在这里插入图片描述

 <countTo :startVal='startVal' :endVal='endVal' :decimals="2" decimal="," separator="." :duration='3000'></countTo>
let startVal = ref(0)
let endVal = ref(0)
let totalRecharge = ref(null)
let interval = ref(null)const getTotalRecharge = (() => {api.getTotalRecharge().then((data) => {totalRecharge.value = data.resource.totalRecharge})
})
// 通过watch,把起始值设置为请求后端接口后旧的数据,把结束值设置为新的数据
watch(totalRecharge, (newValue, oldValue) => {startVal.value = oldValueendVal.value = newValue
})onMounted(() => {getTotalRecharge()clearInterval(interval.value)interval.value = setInterval(() => {getTotalRecharge()}, 15000)
})onBeforeUnmount(() => {clearInterval(interval.value)
})

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

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

相关文章

android AIDL ipc binder转换

一. 概述 众所周知AIDL并不是所有的数据类型都可以传输。 可以传输的类型包括&#xff1a; 1.原生类型 2.String 3. CharSequence 4. List 5.Map 6. Binder 7. Parcelable 容器类 parcelable传输的时候会分解成成员&#xff0c;数组item的方式&#xff0c;传输完成后再进行…

CityEngine实践——常用cga文件解析系列(2)

上回书说到了&#xff1a; 3、RULES/COMPONENTS/MASSING/SUBURBAN_BLOCK DETACHED_HOUSES.CGA ROWHOUSES.CGA SEMI_DETACHED_HOUSES.CGA 4、RULES/COMPONENTS/MASSING/URBAN_BLOCK MONOBLOCK.CGA PERIMETER_8_SHAPE.CGA PERIMETER_MULTIPART.CGA 这个cga挺有意思&#xff0c…

贪心算法 - 学习笔记 【C++】

2024-12-09 - 第 38 篇 贪心算法 - 学习笔记 作者(Author): 郑龙浩 / 仟濹(CSND账号名) 贪心算法 学习课程&#xff1a; https://www.bilibili.com/video/BV1f84y1i7mv/?spm_id_from333.337.search-card.all.click&vd_source2683707f584c21c57616cc6ce8454e2b 一、基本…

【安全研究】某黑产网站后台滲透与逆向分析

文章目录 x01. 前言x02. 分析 【&#x1f3e0;作者主页】&#xff1a;吴秋霖 【&#x1f4bc;作者介绍】&#xff1a;擅长爬虫与JS加密逆向分析&#xff01;Python领域优质创作者、CSDN博客专家、阿里云博客专家、华为云享专家。一路走来长期坚守并致力于Python与爬虫领域研究与…

ESP32外设学习部分--SPI篇

SPI学习 前言 我个人以为开始学习一个新的单片机最好的方法就是先把他各个外设给跑一遍&#xff0c;整体了解一下他的功能&#xff0c;由此记录一下我学习ESP32外设的过程&#xff0c;防止以后忘记。 SPI 配置步骤 SPI总线初始化 spi_bus_config_t buscfg {.miso_io_num …

Viewer.js----图片查看

Viewer.js 是一个用于展示图片、视频等多媒体内容的轻量级 JavaScript 库&#xff0c;提供了现代的图片查看器功能&#xff0c;比如放大、缩小、旋转、拖动等操作&#xff0c;适用于浏览器中查看图片等资源。 官网地址&#xff1a;Viewer.js 详细说明&#xff1a;Viewer.js –…

禅道Bug的一次迁移

一、场景 平时工作记录在公司禅道上的问题想备份一份到本地&#xff0c;但是又没有公司禅道的数据库信息&#xff0c;有时候出测试报告想批量调整数据方便截图很困难&#xff0c;同时也为了学习禅道数据流转过程&#xff0c;所以有了把缺陷保存到本地一份的想法。 实际上禅道支…

[ShaderLab] 【Unity】【图像编程】理解 Unity Shader 的结构

在计算机图形学领域,开发者经常面临着管理着色器复杂性的挑战。正如大卫惠勒(David Wheeler)所说:“计算机科学中的任何问题都可以通过增加一层抽象来解决。” Unity 提供了这样一层抽象,即 ShaderLab,它通过组织和定义渲染过程的各个步骤,简化了编写着色器的过程。 什…

redis 怎么样查看list

在 Redis 中&#xff0c;可以通过以下方法查看列表的内容或属性&#xff1a; 1. 查看列表中的所有元素 使用 LRANGE 命令&#xff1a; LRANGE key start endkey 是列表的名称。start 是起始索引&#xff0c;0 表示第一个元素。end 是结束索引&#xff0c;-1 表示最后一个元素…

Redis - 消息队列 Stream

一、概述 消息队列 定义 消息队列模型&#xff1a;一种分布式系统中的消息传递方案&#xff0c;由消息队列、生产者和消费者组成消息队列&#xff1a;负责存储和管理消息的中间件&#xff0c;也称为消息代理&#xff08;Message Broker&#xff09;生产者&#xff1a;负责 产…

C语言数组和字符串笔记

C语言数组和字符串笔记 1. 数组及其相关概念 1.1 为什么需要使用数组&#xff1f; 数组是一个有序的、类型相同的数据集合。这些数据被称为数组的元素。每个数组都有一个名字&#xff0c;数组名代表数组的起始地址。数组的元素通过索引或下标访问&#xff0c;索引从0开始。 …

淘宝详情网页爬虫:技术解析与实战指南

引言 淘宝作为中国最大的电商平台之一&#xff0c;拥有海量的商品数据。对于开发者来说&#xff0c;获取淘宝商品详情接口是一个常见的需求。本文将介绍如何使用Python编写爬虫&#xff0c;获取淘宝商品详情信息&#xff0c;并探讨在实际应用中可能遇到的挑战与解决方案。 环…

双目摄像头标定方法

打开matlab 找到这个标定 将双目左右目拍的图像上传&#xff08;左右目最好不少于20张&#xff09; 等待即可 此时已经完成标定&#xff0c;左下角为反投影误差&#xff0c;右边为外参可视化 把这些误差大的删除即可。 点击导出 此时回到主页面&#xff0c;即可看到成功导出 Ca…

数据结构开始——时间复杂度和空间复杂度知识点笔记总结

好了&#xff0c;经过了漫长的时间学习c语言语法知识&#xff0c;现在我们到了数据结构的学习。 首先&#xff0c;我们得思考一下 什么是数据结构&#xff1f; 数据结构(Data Structure)是计算机存储、组织数据的方式&#xff0c;指相互之间存在一种或多种特定关系的数据元素…

什么是MMD Maximum Mean Discrepancy 最大均值差异?

9多次在迁移学习看到了&#xff0c;居然还是Bernhard Schlkopf大佬的论文&#xff0c;仔细看看。 一.什么是MMD&#xff1f; 1. MMD要做什么&#xff1f; 判断两个样本&#xff08;族&#xff09;是不是来自于同一分布 2.怎么做&#xff1f;&#xff08;直观上&#xff09;…

计算机操作系统虚拟化与云计算教学指南

一、引言 在当今数字化时代&#xff0c;计算机操作系统虚拟化和云计算已成为信息技术领域的核心技术。无论是大型企业的数据中心&#xff0c;还是个人开发者的工作环境&#xff0c;都广泛应用着这些技术。本教学博客将深入探讨虚拟化的基本概念、虚拟化技术、云计算等重要内容…

电梯内电动车识别数据集,可准确识别电梯内是否有电动车 支持YOLO,COCO,VOC三种格式的标注 7111张图片

电梯内电动车识别数据集&#xff0c;可识别电梯内是否有电动车 支持YOLO&#xff0c;COCO&#xff0c;VOC三种格式的标注 7111张图片 7111总图像数 数据集分割 训练组 74&#xff05; 5291图片 有效集 16% 1168图片 测试集 9&#xff05; 652…

Collection接口

目录 一. Collection基本介绍 二. Collection中的方法及其使用 1. 添加元素 (1) 添加单个元素 (2) 添加另一集合中的所有元素 2. 删除元素 (1) 删除单个元素 (2) 删除某个集合中包含在其他集合中的元素 (3) 保留两个集合中的交集部分, 删除其他元素. 3. 遍历元素 (1) …

Mybatis Plus 3.0 快速入门

1、简介 MyBatis-Plus (简称 MP)是一个 MyBatis 的增强工具,在 MyBatis 的基础上只做增强不做改变,为简化开发、提高效率而生。 2、创建并初始化数据库 2.1、创建数据库 mybatis_plus 2.2、创建 User 表 其表结构如下: idnameageemail1Jone18test1@baomidou.com2Jack…

图像清晰度计算

对于单图清晰度检测&#xff0c;可以采用基于梯度的方法来评估图像的清晰度。这些方法通过计算图像中边缘信息的强度来量化图像是否足够清晰。以下是几种常用的技术及其具体实现方式&#xff0c;特别适用于单张图片的清晰度检测。 拉普拉斯变换&#xff08;Laplacian&#xff…