Vue3实战学习（Element-Plus常用组件的使用(输入框、下拉框、单选框多选框、el-image图片)）(上)(5)

目录

一、Vue3工程环境配置、项目基础脚手架搭建、Vue3基础语法、Vue3集成Element-Plus的详细教程。(博客链接如下)

二、Element-Plus常用组件使用。

（1）el-input。(input输入框)

<1>正常状态的el-input。

<2>el-input的disable状态。

<3>el-input的readonly状态。

<4>el-input的Icon(图标)用法。

测试使用"搜索"的图标。

测试使用"日历"的图标。

<5>el-input的文本域(type="textarea")。

<6>el-input的clearable(可清空)状态。

（2）el-select。(select选择下拉框)

<1>使用v-for+数组+值。

<2>使用v-for+数组+对象。

value不一样。

value一样。key不一样。label一样。

<3>el-select的clearable(可清除)、multiple(多选下拉框)状态。

<4>key不一样。value不一样。label一样。(设置value-key属性)

（3）el-radio-group。(Radio单选框)

<1>不设置默认选中。

<2>设置默认选中。

<3>使用label属性设置展示值。

<4>单选框——按钮组样式。

（4）el-checkbox-group。(Checkbox多选框)

使用v-for形式渲染多选项框。(代码示例)

（5）el-image。(Image图片)

<1>原生图片标签img。

<2>el-image使用"网络地址"渲染图片。

<3>el-image使用"本地图片路径地址"渲染图片。

<4>el-image设置多张图片预览(放大、缩小、旋转、上下一张等等)。

一、Vue3工程环境配置、项目基础脚手架搭建、Vue3基础语法、Vue3集成Element-Plus的详细教程。(博客链接如下)

  • Vue3实战学习（Vue环境配置、快速上手及卸载、下载安装Node.js超详细教程(2025)、npm配置淘宝镜像）(1)-CSDN博客
  • Vue3实战学习（IDEA中打开、启动与搭建Vue3工程极简脚手架教程(2025超详细教程)、Windows系统命令行启动Vue3工程）(2)-CSDN博客
  • Vue3实战学习（Vue3的基础语法学习与使用(超详细)）(3)-CSDN博客
  • Vue3实战学习（Vue3集成Element-Plus(常用依赖、插件安装与导入 。按钮、图标组件。自定义主题的实现)(超详细)）(4)-CSDN博客
  • 注意：本篇博客是《Element-Plus常用组件的使用》的上篇。
  • 只是讲解与演示了一部分的常用组件的使用，还有更多的组件使用学习在下篇！

二、Element-Plus常用组件使用。

  • Element-Plus的网址（国内镜像）：一个 Vue 3 UI 框架 | Element Plus
（1）el-input。(input输入框)
  • 标签<el-input>。
<1>正常状态的el-input。
  • 必须使用v-model绑定值。否则输入框无法进行内容的修改。
<template><div><div><el-input v-model="data.input" style="width: 240px" placeholder="请输入内容" />{{data.input}}</div></div></template><script setup>import {reactive} from "vue";//定义数据的常用方式
const data = reactive({input:null,
})</script>

<2>el-input的disable状态。
  • el-input处于disable状态时，不能输入任何值。输入框被禁用！
<el-input v-model="data.input" style="width: 240px" placeholder="请输入内容" disabled/>{{data.input}}

<3>el-input的readonly状态。
  • el-input处于readonly状态时，也是不能进行输入框的输入或修改。只读状态！
<el-input v-model="data.input" style="width: 240px" placeholder="请输入内容" readonly />{{data.input}}
import {reactive} from "vue";
//定义数据的常用方式
const data = reactive({input:'岁岁岁平安真的帅！',
})

<4>el-input的Icon(图标)用法。
  • 测试使用"搜索"的图标。
<el-input v-model="data.input" style="width: 240px" placeholder="请输入内容" readonly :prefix-icon="Search"/>{{data.input}}
import {reactive} from "vue";
import {Search} from "@element-plus/icons-vue";

  • 属性size可以设置el-input的大小。一般情况下自动为默认大小。

<el-input v-model="data.input" style="width: 240px;margin-bottom:10px" placeholder="请输入内容" readonly :prefix-icon="Search"/>{{data.input}}
<el-input v-model="data.input"  size="small" style="width: 240px;margin-bottom:10px" placeholder="请输入内容" readonly :prefix-icon="Search"/>
  • 测试使用"日历"的图标。
<el-input placeholder="日期选择" readonly :suffix-icon="Calendar"/>
import {Calendar, Search} from "@element-plus/icons-vue";

  • 为了不让其占整行，手动设置宽度（width）即可。
<!-- 默认占整行。可以通过设置width调整宽度 -->
<el-input style="width: 200px" placeholder="日期选择" readonly :suffix-icon="Calendar"/>

<5>el-input的文本域(type="textarea")。
  • 当需要展示的文字比较多时，输入框内的内容就会被压缩。

  • 首先可以设置宽度(width)。重点是：添加type="textarea"。
<div style="margin: 30px;"><el-input type="textarea" v-model="data.describe" style="width: 350px" placeholder="日期选择"/>
</div>
import {reactive} from "vue";
//定义数据的常用方式
const data = reactive({input:'岁岁岁平安真的帅！',describe:'人工智能是研究、开发用于模拟、延伸和扩展人的智能的理论、方法、技术及应用系统的一门新的技术科学。',})

<6>el-input的clearable(可清空)状态。
  • "clearable"的作用：可以使用清除图标来清除所有的输入。
<el-input v-model="data.input" clearable style="width: 240px;margin-bottom:10px;margin-left: 20px" placeholder="请输入内容"  :prefix-icon="Search"/>

（2）el-select。(select选择下拉框)
  • 外标签：<el-select>。
  • 内标签：<el-option>。
<1>使用v-for+数组+值。
  • el-option配置"v-for"快速遍历所有的下拉框选项。(常用方法)
  • 一般情况下data.value是设置为''(空)，由用户选择后将值绑定给指定变量。
  • 而数组options是从数据库拿取过来的，然后依次渲染下拉框的所有选项。
<div style="margin: 30px"><el-selectv-model="data.value"placeholder="请选择水果"size="large"style="width: 240px"><el-optionv-for="item in data.options":key="item":label="item":value="item"/>
</el-select> <span style="margin-left: 10px">{{data.value}}</span>
</div>
import {reactive} from "vue";
//定义数据的常用方式
const data = reactive({input:'岁岁岁平安真的帅！',describe:'人工智能是研究、开发用于模拟、延伸和扩展人的智能的理论、方法、技术及应用系统的一门新的技术科学。',value:'',options:['苹果','香蕉','橘子'],})

  • 这里的下拉框选定的值绑定data.value。使用"{{}}"直观展示选项是否绑定值。

<2>使用v-for+数组+对象。
  • value不一样。
<div style="margin: 30px"><el-selectv-model="data.value"placeholder="请选择水果"size="large"style="width: 240px"><el-optionv-for="item in data.options":key="item.name":label="item.name":value="item.name"/></el-select> <span style="margin-left: 10px">{{data.value}}</span></div>
import {reactive} from "vue";
const data = reactive({input:'岁岁岁平安真的帅！',describe:'人工智能是研究、开发用于模拟、延伸和扩展人的智能的理论、方法、技术及应用系统的一门新的技术科学。',value:'',options:[{name:'苹果'},{name:'香蕉'},{name:'橘子'},],})
  • value一样。key不一样。label一样。
<div style="margin: 30px"><el-selectv-model="data.value"placeholder="请选择水果"size="large"style="width: 240px"><el-optionv-for="item in data.options":key="item.id":label="item.name":value="item.name"/></el-select> <span style="margin-left: 10px">{{data.value}}</span></div>
import {reactive} from "vue";
//定义数据的常用方式
const data = reactive({input:'岁岁岁平安真的帅！',describe:'人工智能是研究、开发用于模拟、延伸和扩展人的智能的理论、方法、技术及应用系统的一门新的技术科学。',value:'',options:[{id:1,name:'苹果'},{id:2,name:'香蕉'},{id:3,name:'橘子'},{id:4,name:'苹果'},],})
  • 实际当选中某两个相同value时，虽然id不同，但是它们还是同时被选中了。
  • 证明id不一致。只要lable相同、value相同。它还是是同一个对象。

<3>el-select的clearable(可清除)、multiple(多选下拉框)状态。
  • "clearable"的作用：可以使用清除图标来清除选择。
  • "multiple"的作用：使下拉单选择变成下拉多选框。
<div style="margin: 30px"><el-selectv-model="data.value"clearablemultipleplaceholder="请选择水果"size="large"style="width: 240px"><el-optionv-for="item in data.options":key="item.id":label="item.name":value="item.name"/></el-select> <span style="margin-left: 10px">{{data.value}}</span></div>
import {reactive} from "vue";
import {Calendar, Search} from "@element-plus/icons-vue";//定义数据的常用方式
const data = reactive({input:'岁岁岁平安真的帅！',describe:'人工智能是研究、开发用于模拟、延伸和扩展人的智能的理论、方法、技术及应用系统的一门新的技术科学。',value:'',options:[{id:1,name:'苹果'},{id:2,name:'香蕉'},{id:3,name:'橘子'},{id:4,name:'苹果'},],})
  • 通过程序的运行。可以发现虽然id不一样、value不一样

<4>key不一样。value不一样。label一样。(设置value-key属性)
  • 通过使用"value-key=id"可以保证对象的唯一性。

<div style="margin: 30px"><el-selectv-model="data.value"clearablemultiplevalue-key="id"placeholder="请选择水果"size="large"style="width: 240px"><el-optionv-for="item in data.options":key="item.id":label="item.label":value="item.name"/></el-select> <span style="margin-left: 10px">{{data.value}}</span></div>
import {reactive} from "vue";const data = reactive({input:'岁岁岁平安真的帅！',describe:'人工智能是研究、开发用于模拟、延伸和扩展人的智能的理论、方法、技术及应用系统的一门新的技术科学。',value:'',options:[{id:1,label:'苹果',name:'苹果'},{id:2,label:'香蕉',name:'香蕉'},{id:3,label:'橘子',name:'橘子'},{id:4,label:'苹果',name:'苹果2'},],})
  • 可以很清楚的看到：虽然多项选择的标签其中有两个选择的是"苹果"（因为label相同），但实际后台绑定的值是"苹果"和"苹果1"。
  • 证明id不一致、value不一致、label一致。达成的效果是可以的。

（3）el-radio-group。(Radio单选框)
  • 官网详细。分析属性“label”与“value”。

  • 外标签：<el-radio-group>。

  • 内标签：<el-radio>。

<1>不设置默认选中。
<div style="margin: 30px"><el-radio-group v-model="data.sex"><el-radio value="男">男</el-radio><el-radio value="女">女</el-radio></el-radio-group>
</div>
import {reactive} from "vue";const data = reactive({input:'岁岁岁平安真的帅！',describe:'人工智能是研究、开发用于模拟、延伸和扩展人的智能的理论、方法、技术及应用系统的一门新的技术科学。',value:'',options:[{id:1,label:'苹果',name:'苹果'},{id:2,label:'香蕉',name:'香蕉'},{id:3,label:'橘子',name:'橘子'},{id:4,label:'苹果',name:'苹果2'},],sex:''})
<2>设置默认选中。
  • 给绑定的data.sex赋值默认为"男"即可完成。
import {reactive} from "vue";const data = reactive({input:'岁岁岁平安真的帅！',describe:'人工智能是研究、开发用于模拟、延伸和扩展人的智能的理论、方法、技术及应用系统的一门新的技术科学。',value:'',options:[{id:1,label:'苹果',name:'苹果'},{id:2,label:'香蕉',name:'香蕉'},{id:3,label:'橘子',name:'橘子'},{id:4,label:'苹果',name:'苹果2'},],sex:'男'})

<3>使用label属性设置展示值。
<div style="margin: 30px"><el-radio-group v-model="data.sex"><el-radio value="男" label="男"></el-radio><el-radio value="女" label="女"></el-radio></el-radio-group> <span style="margin-left: 20px">{{data.sex}}</span>
</div>
import {reactive} from "vue";const data = reactive({input:'岁岁岁平安真的帅！',describe:'人工智能是研究、开发用于模拟、延伸和扩展人的智能的理论、方法、技术及应用系统的一门新的技术科学。',value:'',options:[{id:1,label:'苹果',name:'苹果'},{id:2,label:'香蕉',name:'香蕉'},{id:3,label:'橘子',name:'橘子'},{id:4,label:'苹果',name:'苹果2'},],sex:'男'})

<4>单选框——按钮组样式。

  • 官方文档。

  • 代码示例。
<div style="margin: 30px"><el-radio-group v-model="data.tar" size="large"><el-radio-button label="我喜欢的" value="1" /><el-radio-button label="我收藏的" value="2" /><el-radio-button label="我下载的" value="3" /></el-radio-group>
</div>
import {reactive} from "vue";const data = reactive({input:'岁岁岁平安真的帅！',describe:'人工智能是研究、开发用于模拟、延伸和扩展人的智能的理论、方法、技术及应用系统的一门新的技术科学。',value:'',options:[{id:1,label:'苹果',name:'苹果'},{id:2,label:'香蕉',name:'香蕉'},{id:3,label:'橘子',name:'橘子'},{id:4,label:'苹果',name:'苹果2'},],sex:'男',tar:"1",})
  • 之所以和官网的颜色有差别，是因为博主自定义了主题颜色。

  • 具体自定义主题的详细教学的博客链接：Vue3实战学习（Vue3集成Element-Plus(常用依赖、插件安装与导入 。按钮、图标组件。自定义主题的实现)(超详细)）(4)-CSDN博客

（4）el-checkbox-group。(Checkbox多选框)
  • 外标签：<el-checkbox-group>。
  • 内标签：<el-checkbox>。
  • 在表格的案例中经常需要使用这种功能。（表格的批量多选导出操作）
  • 使用v-for形式渲染多选项框。(代码示例)
<div style="margin: 30px"><el-checkbox-group v-model="data.checkList"><el-checkbox v-for="item in data.options":key="item.id":label="item.label":value="item.name"/></el-checkbox-group> <span style="margin-left: 20px">{{data.checkList}}</span>
</div>
import {reactive} from "vue";//定义数据的常用方式
const data = reactive({input:'岁岁岁平安真的帅！',describe:'人工智能是研究、开发用于模拟、延伸和扩展人的智能的理论、方法、技术及应用系统的一门新的技术科学。',value:'',options:[{id:1,label:'苹果',name:'苹果'},{id:2,label:'香蕉',name:'香蕉'},{id:3,label:'橘子',name:'橘子'},{id:4,label:'苹果',name:'苹果2'},],sex:'男',tar:"1",checkList:[],})
  • 数组data.checkLists里存储的值是数组data.options的对应选择的item.name的值。

  • disabled状态。
<el-checkbox v-for="item in data.options"disabled:key="item.id":label="item.label":value="item.name"
/>

（5）el-image。(Image图片)
  • 官方文档。这是element-plus提供的一个强大的图片渲染标签。
  • 可以使图片预览更加多元化：放大、缩小、旋转、上下一张等等。

  • 原生图片标签：<img>。
  • element-plus：<el-image>。
<1>原生图片标签img。
  • 代码示例。
<div style="margin: 30px"><img src="@/assets/logo.svg" alt="vue" width="150px">
</div>

<2>el-image使用"网络地址"渲染图片。
<div style="margin: 30px"><img src="@/assets/logo.svg" alt="vue" width="150px"><el-image style="width: 150px;margin-left: 15px" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" />
</div>

  • 当然也可以使用:src绑定图片网络地址。
 <div style="margin: 30px"><img src="@/assets/logo.svg" alt="vue" width="150px"><el-image style="width: 150px;margin-left: 15px" :src="data.url" /><el-image style="width: 150px;margin-left: 15px" :src="img" />
</div>
import {reactive} from "vue";//定义数据的常用方式
const data = reactive({input:'岁岁岁平安真的帅！',describe:'人工智能是研究、开发用于模拟、延伸和扩展人的智能的理论、方法、技术及应用系统的一门新的技术科学。',value:'',options:[{id:1,label:'苹果',name:'苹果'},{id:2,label:'香蕉',name:'香蕉'},{id:3,label:'橘子',name:'橘子'},{id:4,label:'苹果',name:'苹果2'},],sex:'男',tar:"1",checkList:[],url:'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'})

<3>el-image使用"本地图片路径地址"渲染图片。
  • 使用import导入对应图片路径地址即可。
<div style="margin: 30px"><img src="@/assets/logo.svg" alt="vue" width="150px"><el-image style="width: 150px;margin-left: 15px" :src="img" />
</div>
import img from '@/assets/logo.svg'

<4>el-image设置多张图片预览(放大、缩小、旋转、上下一张等等)。
  • 应用场景：给商品设置多张预览图片！
<div style="margin: 30px"><el-image style="width: 150px;margin-left: 15px" :src="data.url" :preview-src-list="data.urlList "/>
</div>
import {reactive} from "vue";//定义数据的常用方式
const data = reactive({input:'岁岁岁平安真的帅！',describe:'人工智能是研究、开发用于模拟、延伸和扩展人的智能的理论、方法、技术及应用系统的一门新的技术科学。',value:'',options:[{id:1,label:'苹果',name:'苹果'},{id:2,label:'香蕉',name:'香蕉'},{id:3,label:'橘子',name:'橘子'},{id:4,label:'苹果',name:'苹果2'},],sex:'男',tar:"1",checkList:[],url:'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',urlList:['https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg','https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg','https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',]})

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

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

相关文章

微服务——网关、网关登录校验、OpenFeign传递共享信息、Nacos共享配置以及热更新、动态路由

微服务——网关、网关登录校验、OpenFeign传递共享信息、Nacos共享配置以及热更新、动态路由

之前学习了Nacos&#xff0c;用于发现并注册、管理项目里所有的微服务&#xff0c;而OpenFeign简化微服务之间的通信&#xff0c;而为了使得前端可以使用微服务项目里的每一个微服务的接口&#xff0c;就应该将所有微服务的接口管理起来方便前端调用&#xff0c;所以有了网关。…
阅读更多...
2025年3月11日（有限元牛顿迭代法：通俗讲解与示例）

2025年3月11日（有限元牛顿迭代法：通俗讲解与示例）

牛顿迭代法的正确流程解释 是的&#xff0c;你的理解基本正确&#xff01;但需要更准确地描述内外力的关系和迭代逻辑。以下是更清晰的步骤说明&#xff1a; 核心流程&#xff08;修正版&#xff09; 假设已知 外力 ( F_{\text{ext}} )&#xff08;如2000 N&#xff09;&…
阅读更多...
爬虫的精准识别：基于 User-Agent 的正则实现

爬虫的精准识别：基于 User-Agent 的正则实现

&#x1f9d1; 博主简介&#xff1a;CSDN博客专家&#xff0c;历代文学网&#xff08;PC端可以访问&#xff1a;https://literature.sinhy.com/#/?__c1000&#xff0c;移动端可微信小程序搜索“历代文学”&#xff09;总架构师&#xff0c;15年工作经验&#xff0c;精通Java编…
阅读更多...
【AI大模型】LLM训练deepseek如何识别视频

【AI大模型】LLM训练deepseek如何识别视频

要让像DeepSeek这样的大语言模型&#xff08;LLM&#xff09;具备视频识别能力&#xff0c;需要结合多模态学习技术&#xff0c;将视觉信息与文本语义进行融合。以下是实现这一目标的关键步骤和技术要点&#xff1a; --- 一、视频识别的核心挑战 1. 多模态数据&#xff1a;视频…
阅读更多...
【物联网-以太网-W5500】

【物联网-以太网-W5500】

物联网-以太网-W5500 ■ W5500-简介■■■■ ■ W5500-简介 ■ ■ ■ ■
阅读更多...
centos linux安装mysql8 重置密码 远程连接

centos linux安装mysql8 重置密码 远程连接

1. 下载并安装 MySQL Yum 仓库 从 MySQL 官方网站下载并安装 Yum 仓库配置文件。 # 下载MySQL 8.0的Yum仓库包 wget https://dev.mysql.com/get/mysql80-community-release-el7-5.noarch.rpm # 安装Yum仓库包 sudo rpm -ivh mysql80-community-release-el7-5.noarch.rpm2. 启…
阅读更多...
C++【类和对象】(超详细！！！)

C++【类和对象】(超详细！！！)

C【类和对象】 1.运算符重载2.赋值运算符重载3.日期类的实现 1.运算符重载 (1).C规定类类型运算符使用时&#xff0c;必须转换成调用运算符重载。 (2).运算符重载是具有特殊名字的函数&#xff0c;名字等于operator加需要使用的运算符&#xff0c;具有返回类型和参数列表及函数…
阅读更多...
【面试】Java 多线程

【面试】Java 多线程

多线程 1、什么是线程和进程2、创建线程有几种方式3、线程有几种状态4、什么是上下文切换5、什么是守护线程&#xff0c;和普通线程有什么区别6、什么是线程池&#xff0c;如何实现的7、Executor和Executors的区别8、线程池处理任务的流程9、线程数设定成多少更合适10、执行exe…
阅读更多...
宿主机运行pyspark任务读取docker hadoop容器上的数据

宿主机运行pyspark任务读取docker hadoop容器上的数据

熬了四个大夜才搞明白&#xff0c;最晚一天熬到早上十点/(ㄒoㄒ)/~~&#xff0c;最后发现只要加个参数就解决了。。。抱头痛哭 问题描述&#xff1a; Hadoop集群部署在docker容器中&#xff0c;宿主机执行pyspark程序读取hive表 问题一&#xff1a;当master(local[*])时&…
阅读更多...
《平凡的世界》：在泥土中寻找星辰的勇气

《平凡的世界》：在泥土中寻找星辰的勇气

“平凡不是平庸的代名词&#xff0c;而是千万人用脊梁扛起时代的勋章。”——路遥的《平凡的世界》用百万字书写了黄土地上孙少安、孙少平两兄弟的挣扎与觉醒&#xff0c;撕开了“奋斗逆袭”的浪漫滤镜&#xff0c;告诉你&#xff1a;真正的英雄主义&#xff0c;是在认清了生活…
阅读更多...
【SpringMVC】深入解析使用 Postman 和浏览器模拟将单个与多个参数传递到后端和后端接收过程

【SpringMVC】深入解析使用 Postman 和浏览器模拟将单个与多个参数传递到后端和后端接收过程

SpringMVC—请求(Request) 访问不同的路径&#xff0c;就是发送不同的请求&#xff1b;在发送请求时&#xff0c;可能会带一些参数&#xff0c;所以学习Spring的请求&#xff0c;主要是学习如何传递参数到后端以及后端如何接收&#xff1b; 我们主要是使用 浏览器 和 Postman …
阅读更多...
04 | 初始化 fastgo 项目仓库

04 | 初始化 fastgo 项目仓库

提示&#xff1a; 所有体系课见专栏&#xff1a;Go 项目开发极速入门实战课&#xff1b;欢迎加入我的训练营&#xff1a;云原生AI实战营&#xff0c;一个助力 Go 开发者在 AI 时代建立技术竞争力的实战营&#xff1b;本节课最终源码位于 fastgo 项目的 feature/s01 分支&#x…
阅读更多...
Docker 安装成功后，安装 Dify 中文版本的步骤

Docker 安装成功后，安装 Dify 中文版本的步骤

Docker 安装成功后&#xff0c;安装 Dify 中文版本的步骤如下1&#xff1a; 克隆 Dify 代码仓库&#xff1a;在终端中执行以下命令&#xff0c;将 Dify 源代码克隆至本地环境。 bash git clone https://github.com/langgenius/dify.git进入 Dify 的 docker 目录&#xff1a; b…
阅读更多...
RPC服务调用深度解析：从原理到Java实践

RPC服务调用深度解析：从原理到Java实践

一、RPC的核心原理与架构设计 1.1 RPC的本质 RPC&#xff08;Remote Procedure Call&#xff09;是一种分布式系统间通信协议&#xff0c;允许程序像调用本地方法一样调用远程服务。其核心目标是通过位置透明性和协议标准化隐藏网络通信细节。RPC的调用流程可抽象为以下步骤&…
阅读更多...
电脑的写字板如何使用？

电脑的写字板如何使用？

打开写字板&#xff1a; 直接按一下键盘上的win R 键&#xff0c;然后输入&#xff1a;write &#xff0c; 再按一下回车 , 即可打开写字板 可以在里面写文字 和 插入图片等… &#xff0c; 如下所示&#xff1a; 保存写字板内容&#xff1a; 当我们写好了之后&#xff0c;…
阅读更多...
医疗AI测试实战：如何确保人工智能安全赋能医疗行业？

医疗AI测试实战：如何确保人工智能安全赋能医疗行业？

一、医疗AI测试的重要性 人工智能&#xff08;AI&#xff09;正广泛应用于医疗行业&#xff0c;如疾病诊断、医学影像分析、药物研发、手术机器人和智能健康管理等领域。医疗AI技术的应用不仅提高了诊断效率&#xff0c;还能降低误诊率&#xff0c;改善患者治疗效果。然而&…
阅读更多...
AI日报 - 2025年3月12日

AI日报 - 2025年3月12日

AI日报 - 2025年3月12日 &#x1f31f; 今日概览&#xff08;60秒速览&#xff09; ▎&#x1f916; AGI突破 | Anthropic CEO预测AI将主导代码编写 &#x1f52c; 自训练技术显著提升LLM思维清晰度 ▎&#x1f4bc; 商业动向 | OpenAI与CoreWeave达成119亿美元基建协议 &…
阅读更多...
跳表数据结构

跳表数据结构

跳表&#xff08;Skip List&#xff09;是一种支持高效插入、删除和查找的链表结构&#xff0c;用于加速查找操作&#xff0c;特别适用于有序数据集合。它在Redis、LevelDB等系统中被用于**有序集合&#xff08;Sorted Set&#xff09;**的实现。 1. 跳表的结构 跳表的核心思…
阅读更多...
系统会把原先的对话状态堆栈从 [“assistant“] 更新为 [“assistant“, “update_flight“]这个更新的处理过程

系统会把原先的对话状态堆栈从 [“assistant“] 更新为 [“assistant“, “update_flight“]这个更新的处理过程

这个更新主要是在 State 定义中通过 Annotated 来自动处理的。在 State 类型中&#xff0c;我们对 dialog_state 字段绑定了 update_dialog_stack 函数&#xff0c;如下所示&#xff1a; class State(TypedDict):messages: Annotated[list[AnyMessage], add_messages]user_inf…
阅读更多...
HTTP发送POST请求的两种方式

HTTP发送POST请求的两种方式

1、json String json HttpRequest.post(getUrl(method, "v1", url, userId, appKey)).header("Content-type", "application/json") // 设置请求头为 JSON 格式.body(JSONUtil.toJsonStr(params)) // 请求体为 JSON 字符串.execute().body(); …
阅读更多...
最新文章

Copyright @ 2022~2023