vue 动态数字效果 vue-animate-number

安装 vue-animate-number 插件

npm install vue-animate-number 

(注:是npm、cnpm还是yarn根据具体项目要求)

在 main.js 中引入

import Vue from 'vue'
import VueAnimateNumber from 'vue-animate-number'
Vue.use(VueAnimateNumber)

动态使用

<li class="user_Overview-item" style="color: #00fdfa"><div class="user_Overview_nums allnum "><!-- <dv-digital-flop :config="config" style="width:100%;height:100%;" /> --><animate-number ref="allnum" :from="config.numberOrigin" :to="config.number" mode="manual"></animate-number></div><p>总设备数</p>
</li>data() {return {config: {numberOrigin: 0,number: 0},}}getData() {currentGET("big2").then((res) => {if (res.success) {this.$refs.allnum.reset(this.config.number, res.data.totalNum)this.$refs.allnum.start()this.config = {numberOrigin: this.config.number,number: res.data.totalNum}}}
}

轮询调用getData,可实现数字的动态设置

  //轮询switper() {if (this.timer) {return}let looper = (a) => {this.getData()};this.timer = setInterval(looper, this.$store.state.setting.echartsAutoTime);},

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

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

相关文章

【MySQL】分析SQL的几种方式

文章目录 一、查看SQL执行频率二、定位低效率执行SQL1. show processlist2. 慢查询日志 三、explain分析执行计划1. id2. select_type3. type4. key5. extra 四、show profile 一、查看SQL执行频率 show session status&#xff1a;显示 session 级的统计结果&#xff08;不写…

openGauss学习笔记-100 openGauss 数据库管理-管理数据库安全-客户端接入之用SSL进行安全的TCP/IP连接

文章目录 openGauss学习笔记-100 openGauss 数据库管理-管理数据库安全-客户端接入之用SSL进行安全的TCP/IP连接100.1 背景信息100.2 前提条件100.3 注意事项100.4 操作步骤100.5 相关参考 openGauss学习笔记-100 openGauss 数据库管理-管理数据库安全-客户端接入之用SSL进行安…

excel+requests管理测试用例接口自动化框架

背景&#xff1a; 某项目有多个接口&#xff0c;之前使用的unittest框架来管理测试用例&#xff0c;将每个接口的用例封装成一个py文件&#xff0c;接口有数据或者字段变动后&#xff0c;需要去每个py文件中找出变动的接口测试用例&#xff0c;维护起来不方便&#xff0c;为了…

双目视觉实战--单视图测量方法

目录 一.简介 二、2D变换 1. 等距变换&#xff08;欧式变换&#xff09; 2. 相似变换 3. 仿射变换 4. 射影变换&#xff08;透视变换&#xff09; 5. 结论 三、影消点与影消线 1. 平面上的线 2. 直线的交点 3. 2D无穷远点 4. 无穷远直线 5. 无穷远点的透视变换与仿…

Spring Cloud Gateway 使用 Redis 限流使用教程

从本文开始&#xff0c;笔者将总结 spring cloud 相关内容的教程 版本选择 为了适应 java8&#xff0c;笔者选择了下面的版本&#xff0c;后续会出 java17的以SpringBoot3.0.X为主的教程 SpringBoot 版本 2.6.5 SpringCloud 版本 2021.0.1 SpringCloudAlibaba 版本 2021.0.1.…

Prometheus的Pushgateway快速部署及使用

prometheus-pushgateway安装 一. Pushgateway简介 Pushgateway为Prometheus整体监控方案的功能组件之一&#xff0c;并做于一个独立的工具存在。它主要用于Prometheus无法直接拿到监控指标的场景&#xff0c;如监控源位于防火墙之后&#xff0c;Prometheus无法穿透防火墙&…

C++基础——内存分区模型

1 概述 C程序在执行是&#xff0c;将内存大致分为4个区域&#xff1a; 代码区&#xff1a;用于存放二进制代码&#xff0c;由操作系统进行管理全局区&#xff1a;存放全局变量和静态变量及常量栈区&#xff1a;由编译器自动分配释放&#xff0c;存放函数的参数、局部变量等堆…

回首往昔,初学编程那会写过的两段愚蠢代码

一、关于判断两个整数是否能整除的GW BASIC创意代码 记得上大学时第一个编程语言是BASIC&#xff0c;当时Visual Basic还没出世&#xff0c;QBASIC虽然已经在1991年随MS-DOS5.0推出了&#xff0c;但我们使用的还是 GW-BASIC&#xff0c; 使用的教材是谭浩强、田淑清编著的《BA…

【广州华锐互动】VR建筑安全培训体验为建筑行业人才培养提供有力支持

随着建筑行业的快速发展&#xff0c;建筑施工安全问题日益受到广泛关注。然而&#xff0c;传统的安全培训方式往往缺乏实践性和真实性&#xff0c;难以让员工真正掌握安全操作技能。近年来&#xff0c;虚拟现实(VR)技术的广泛应用为建筑施工安全培训提供了新的机遇。 虚拟现实技…

armbian 安装mysql

1、执行安装指令 sudo apt-get update sudo apt-get install mysql-server 2、安装成功后&#xff0c;设置密码 ALTER USER root% IDENTIFIED WITH mysql_native_password BY ysw1234; flush privileges;3、设置允许远程连接并生效 use mysql; update user set host % whe…

金融用户实践|分布式存储支持数据仓库业务系统性能验证

作者&#xff1a;深耕行业的 SmartX 金融团队 闫海涛 估值是指对资产或负债的价值进行评估的过程&#xff0c;这对于投资决策具有重要意义。每个金融公司资管业务人员都期望能够实现实时的业务估值&#xff0c;快速获取最新的数据和指标&#xff0c;从而做出更明智的投资决策。…

PostGIS轨迹分析——AIS数据删除异常点

点位连成线 select st_makeline(t.the_geom) from (select the_geomfrom pointswhere name = xxxand point_time > 2023-09-01and point_time < 2023-09-03order by point_time

【数组的使用续篇】

文章目录 以数组的形式打印数组打印方法&#xff1a;Arrays.toString(数组名) 数组排序大小排序方法是 Arrays.sort(数组名) 创建一个自己的打印数组的方法自己创建一个冒泡排序两数之间交换方法 逆置数组打印核心思路还是 i 和 j 交换 总结 以数组的形式打印数组 打印方法&am…

[Python进阶] 操纵鼠标:PyAutoGUI

6.4 操纵鼠标&#xff1a;PyAutoGUI 6.4.1 说明 PyAutoGUI是一个Python的GUI自动化工具&#xff0c;它可以让程序自动控制鼠标和键盘的一系列操作。它能够模拟鼠标的移动、点击、拖拽等操作&#xff0c;以及键盘的按键按下和释放等操作。PyAutoGUI还提供了其他功能&#xff0…

用java语言写一个RSA方式的数据签名、验签,服务端和客户端双方各生成一对RSA公私钥,并交换公钥。己方私钥用于加密,对方公钥用于验签,代码实例类编写。

以下是一个使用Java编写的RSA方式的数据签名和验签的示例代码。在该示例中&#xff0c;服务端和客户端分别生成RSA公私钥对&#xff0c;并进行公钥交换。 java Copy code import java.nio.charset.StandardCharsets; import java.security.*; import java.util.Base64; publi…

软件测试用例设计方法-因果图法

边界值法是等价类划分法的补充&#xff0c;所以&#xff0c;它们是一对搭档。 那么&#xff0c;判定表法有没有它的搭档呢&#xff1f; 答案是&#xff0c;有的。那就是本篇文章分享的用例设计方法—— 因果图法 。 定义 因果图法&#xff1a; 用来处理等价类划分和边界值…

Java:自定义实现SpringBoot Starter

目录 1、自定义Starter1.1、项目结构1.2、代码实现1.3、测试1.4、打包 2、引用Starter2.1、项目结构2.2、引入starter 3、重写默认配置4、重写默认实现5、实现Enable注解5.1、starter项目创建注解5.2、业务工程使用注解 6、元数据7、参考文章 1、自定义Starter 1.1、项目结构 …

三维地图开发三维地图服务器

三维地图开发三维地图服务器 发布时间&#xff1a;2020-03-03 版权&#xff1a; 搭建离线地图服务主要是两个步骤&#xff1a;一是&#xff1a;下载离线地图服务需要的地图数据&#xff1b;二是&#xff1a;将下载的离线地图数据发布成地图服务&#xff1b;只有做好这两步&…

ChatGPT-GPT4:将AI技术融入科研、绘图与论文写作的实践

2023年我们进入了AI2.0时代。微软创始人比尔盖茨称ChatGPT的出现有着重大历史意义&#xff0c;不亚于互联网和个人电脑的问世。360创始人周鸿祎认为未来各行各业如果不能搭上这班车&#xff0c;就有可能被淘汰在这个数字化时代&#xff0c;如何能高效地处理文本、文献查阅、PPT…

出差学小白知识No5:ubuntu连接开发板|上传源码包|板端运行的环境部署

1、ubuntu连接开发板&#xff1a; 在ubuntu终端通过ssh协议来连接开发板&#xff0c;例如&#xff1a; ssh root<IP_address> 即可 这篇文章中也有关于如何连接开发板的介绍&#xff0c;可以参考SOC侧跨域实现DDS通信总结 2、源码包上传 通过scp指令&#xff0c;在ub…