第二十四:5.2【搭建 pinia 环境】axios 异步调用数据
第一步安装:npm install pinia
第二步:操作src/main.ts
改变里面的值的信息:
<div class="count"><h2>当前求和为:{{ sum }}</h2><select v-model.number="n"> // .number 这里是解决整数问题<option value="1">1</option><option value="2">2</option> // 如果要整数的话: :value<option value="3">3</option></select><button @click="add">加</button><button @click="minus">减</button></div>
</template><script setup lang="ts" name="Count">import { ref } from "vue";// 数据let sum = ref(1) // 当前求和let n = ref(1) // 用户选择的数字// 方法function add(){sum.value += n.value}function minus(){sum.value -= n.value}
</script>

安装 axios : npm i axios
快速引入: import axios from "axios";
安装: npm i nanoid // 安装唯一id 扩展
https://api.uomg.com/api/rand.qinghua?format=json

整个区域代码:
<template><div class="talk"><button @click="getLoveTalk">获取一句土味情话</button><ul><li v-for="talk in talkList" :key="talk.id">{{talk.title}}</li></ul></div></template><script setup lang="ts" name="LoveTalk">import {reactive} from 'vue'import axios from "axios";import {nanoid} from 'nanoid'// 数据let talkList = reactive([{id:'ftrfasdf01',title:'今天你有点怪,哪里怪?怪好看的!'},{id:'ftrfasdf02',title:'草莓、蓝莓、蔓越莓,今天想我了没?'},{id:'ftrfasdf03',title:'心里给你留了一块地,我的死心塌地'}])// 方法async function getLoveTalk(){// 发请求,下面这行的写法是:连续解构赋值+重命名let {data:{content:title}} = await axios.get('https://api.uomg.com/api/rand.qinghua?format=json')// 把请求回来的字符串,包装成一个对象let obj = {id:nanoid(),title}// 放到数组中talkList.unshift(obj)}</script><style scoped>.talk {background-color: orange;padding: 10px;border-radius: 10px;box-shadow: 0 0 10px;}</style>
相关文章:
第二十四:5.2【搭建 pinia 环境】axios 异步调用数据
第一步安装:npm install pinia 第二步:操作src/main.ts 改变里面的值的信息: <div class"count"><h2>当前求和为:{{ sum }}</h2><select v-model.number"n"> // .number 这里是…...
Vue2+Element实现Excel文件上传下载预览【超详细图解】
目录 一、需求背景 二、落地实现 1.文件上传 图片示例 HTML代码 业务代码 2.文件下载 图片示例 方式一:代码 方式二:代码 3.文件预览 图片示例 方式一:代码 方式二:代码 一、需求背景 在一个愉快的年后ÿ…...
C# 装箱(Boxing)与拆箱(Unboxing)
C# 装箱(Boxing)与拆箱(Unboxing) 在 C# 中,装箱和拆箱是与值类型(如结构体)和引用类型(如类)之间的转换相关的操作。它们是类型系统的一部分,但如果不正确使…...
【AD】3-10 原理图PDF导出
文件—智能PDF 多页原理图导出 导出设置时选择工程,可自行选择导出一页或多页原理图,一般PCB不用导出...
SQL命令详解之增删改数据
目录 简介 1 添加数据 1.1 基础语法 1.2 SQL 练习 2 修改数据 2.1 基础语法 2.2 SQL 练习 3 删除数据 3.1 基础语法 3.2 SQL 练习 总结 简介 在数据库操作中,增、删、改是最基础的操作,它们通常对应着SQL中的INSERT、DELETE和UPDATE命令。…...
Docker 部署 MinIO 对象存储服务
Docker 部署 MinIO 对象存储服务 前言一、准备工作1. 安装 Docker2. 确认服务器架构 二、设置 MinIO 容器的目录结构三、启动一个临时的 MinIO 容器来获取配置文件四、复制 MinIO 配置文件到本地目录五、删除临时 MinIO 容器六、创建并运行 MinIO 容器,挂载本地目录…...
IP段转CIDR:原理Java实现
🧑 博主简介:CSDN博客专家,历代文学网(PC端可以访问:https://literature.sinhy.com/#/?__c1000,移动端可微信小程序搜索“历代文学”)总架构师,15年工作经验,精通Java编…...
翻译: 深入分析LLMs like ChatGPT 一
大家好,我想做这个视频已经有一段时间了。这是一个全面但面向普通观众的介绍,介绍像ChatGPT这样的大型语言模型。我希望通过这个视频让大家对这种工具的工作原理有一些概念性的理解。 首先,我们来谈谈你在这个文本框里输入内容并点击回车后背…...
springboot之HTML与图片生成
背景 后台需要根据字段动态生成HTML,并生成图片,发送邮件到给定邮箱 依赖 <!-- freemarker模板引擎--> <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-freemarker</artifa…...
数据结构(初阶)(三)----单链表
单链表 概念 概念:链表是⼀种物理存储结构上⾮连续、⾮顺序的存储结构,数据元素的逻辑顺序是通过链表中的指针链接次序实现的。 结点 与顺序表不同的是,链表的结构类似于带车头的火车车厢,,链表的每个车厢都是独立…...
ChatGPT与DeepSeek:AI语言模型的巅峰对决
目录 引言 一、ChatGPT 与 DeepSeek 简介 (一)ChatGPT (二)DeepSeek 二、技术原理剖析 (一)ChatGPT 技术原理 (二)DeepSeek 技术原理 (三)技术原理对比…...
DaoCloud 亮相 2025 GDC丨开源赋能 AI 更多可能
2025 年 2 月 21 日至 23 日,上海徐汇西岸,2025 全球开发者先锋大会以 “模塑全球,无限可能” 的主题,围绕云计算、机器人、元宇宙等多元领域,探讨前沿技术创新、应用场景拓展和产业生态赋能,各类专业论坛、…...
人工智能之数学基础:线性代数中矩阵的运算
本文重点 矩阵的运算在解决线性方程组、描述线性变换等方面发挥着至关重要的作用。通过对矩阵进行各种运算,可以简化问题、揭示问题的本质特征。在实际应用中,我们可以利用矩阵运算来处理图像变换、数据分析、电路网络等问题。深入理解和掌握矩阵的运算,对于学习线性代数以…...
(上)基于机器学习的图像识别——遥感图像分类(LeNet-5;AlexNet;VGGNet;GoogLeNet;ResNet)
遥感图像识别: 专业词汇: kernel:卷积 目录 遥感图像分类 1.1 LeNet-5 视频来源: 任务:使用什么网络实现遥感图像的分类 LeNet-5结构: 遥感图像分类 1.2 AlexNet(冠军) 视频…...
数据集笔记:NUSMods API
1 介绍 NUSMods API 包含用于渲染 NUSMods 的数据。这些数据包括新加坡国立大学(NUS)提供的课程以及课程表的信息,还包括上课地点的详细信息。 可以使用并实验这些数据,它们是从教务处提供的官方 API 中提取的。 该 API 由静态的…...
HTML元素,标签到底指的哪块部分?单双标签何时使用?
1. 标签(Tag) vs 元素(Element) 标签(Tag) 标签是 HTML 中用于定义元素的符号,用尖括号 < > 包裹。例如 <img> 是标签。元素(Element) 元素是由 标签 内容…...
基于ai技术的视频生成工具
一、通用型AI视频生成工具 腾讯智影 特点:支持数字人播报、文字转视频,提供免费模板和素材库,登录即送5分钟免费时长,每日签到可兑换额外额度。 限制:免费版分辨率较低,部分高级功能需付费。 LunaAI.vid…...
【Java 后端】Restful API 接口
Restful API 接口 REST:Representational State Transfer,表现层(前端的视图页面和后端的控制层)资源状态转移。 一种软件架构的风格(格式) RESTful 是目前最流行的互联网软件架构,如果一个架…...
Matlab地图绘制教程第2期—水陆填充图
上一期分享了海岸线图的绘制方法: 本着由浅入深的理念,本期再来分享一下水陆填充图的绘制方法。 先来看一下成品效果: 特别提示:Matlab地图绘制教程系列,旨在降低大家使用Matlab进行地图类科研绘图的门槛,…...
企业知识库搭建:14款开源与免费系统选择
本文介绍了以下14 款知识库管理系统:1.Worktile;2.PingCode;3.石墨文档; 4. 语雀; 5. 有道云笔记; 6. Bitrix24; 7. Logseq等。 在如今的数字化时代,企业和团队面临着越来越多的信息…...
大型活动交通拥堵治理的视觉算法应用
大型活动下智慧交通的视觉分析应用 一、背景与挑战 大型活动(如演唱会、马拉松赛事、高考中考等)期间,城市交通面临瞬时人流车流激增、传统摄像头模糊、交通拥堵识别滞后等问题。以演唱会为例,暖城商圈曾因观众集中离场导致周边…...
基于uniapp+WebSocket实现聊天对话、消息监听、消息推送、聊天室等功能,多端兼容
基于 UniApp + WebSocket实现多端兼容的实时通讯系统,涵盖WebSocket连接建立、消息收发机制、多端兼容性配置、消息实时监听等功能,适配微信小程序、H5、Android、iOS等终端 目录 技术选型分析WebSocket协议优势UniApp跨平台特性WebSocket 基础实现连接管理消息收发连接…...
spring:实例工厂方法获取bean
spring处理使用静态工厂方法获取bean实例,也可以通过实例工厂方法获取bean实例。 实例工厂方法步骤如下: 定义实例工厂类(Java代码),定义实例工厂(xml),定义调用实例工厂ÿ…...
C++八股 —— 单例模式
文章目录 1. 基本概念2. 设计要点3. 实现方式4. 详解懒汉模式 1. 基本概念 线程安全(Thread Safety) 线程安全是指在多线程环境下,某个函数、类或代码片段能够被多个线程同时调用时,仍能保证数据的一致性和逻辑的正确性…...
是否存在路径(FIFOBB算法)
题目描述 一个具有 n 个顶点e条边的无向图,该图顶点的编号依次为0到n-1且不存在顶点与自身相连的边。请使用FIFOBB算法编写程序,确定是否存在从顶点 source到顶点 destination的路径。 输入 第一行两个整数,分别表示n 和 e 的值(1…...
企业如何增强终端安全?
在数字化转型加速的今天,企业的业务运行越来越依赖于终端设备。从员工的笔记本电脑、智能手机,到工厂里的物联网设备、智能传感器,这些终端构成了企业与外部世界连接的 “神经末梢”。然而,随着远程办公的常态化和设备接入的爆炸式…...
让回归模型不再被异常值“带跑偏“,MSE和Cauchy损失函数在噪声数据环境下的实战对比
在机器学习的回归分析中,损失函数的选择对模型性能具有决定性影响。均方误差(MSE)作为经典的损失函数,在处理干净数据时表现优异,但在面对包含异常值的噪声数据时,其对大误差的二次惩罚机制往往导致模型参数…...
音视频——I2S 协议详解
I2S 协议详解 I2S (Inter-IC Sound) 协议是一种串行总线协议,专门用于在数字音频设备之间传输数字音频数据。它由飞利浦(Philips)公司开发,以其简单、高效和广泛的兼容性而闻名。 1. 信号线 I2S 协议通常使用三根或四根信号线&a…...
消息队列系统设计与实践全解析
文章目录 🚀 消息队列系统设计与实践全解析🔍 一、消息队列选型1.1 业务场景匹配矩阵1.2 吞吐量/延迟/可靠性权衡💡 权衡决策框架 1.3 运维复杂度评估🔧 运维成本降低策略 🏗️ 二、典型架构设计2.1 分布式事务最终一致…...
解析两阶段提交与三阶段提交的核心差异及MySQL实现方案
引言 在分布式系统的事务处理中,如何保障跨节点数据操作的一致性始终是核心挑战。经典的两阶段提交协议(2PC)通过准备阶段与提交阶段的协调机制,以同步决策模式确保事务原子性。其改进版本三阶段提交协议(3PC…...
