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-select
          v-model="data.value"
          placeholder="请选择水果"
          size="large"
          style="width: 240px"
      >
        <el-option
            v-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-select
          v-model="data.value"
          placeholder="请选择水果"
          size="large"
          style="width: 240px"
      >
        <el-option
            v-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-select
          v-model="data.value"
          placeholder="请选择水果"
          size="large"
          style="width: 240px"
      >
        <el-option
            v-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-select
          v-model="data.value"
          clearable
          multiple
          placeholder="请选择水果"
          size="large"
          style="width: 240px"
      >
        <el-option
            v-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-select
          v-model="data.value"
          clearable
          multiple
          value-key="id"
          placeholder="请选择水果"
          size="large"
          style="width: 240px"
      >
        <el-option
            v-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',
  ]

})

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

AttributeError: module ‘backend_interagg‘ has no attribute ‘FigureCanvas‘

AttributeError: module ‘backend_interagg‘ has no attribute ‘FigureCanvas‘

AttributeError: module backend_interagg has no attribute FigureCanvas 这个错误通常是由于 Matplotlib 的后端配置问题引起的。具体来说&#xff0c;Matplotlib 在尝试加载某个后端时&#xff0c;发现该后端模块中缺少必要的属性&#xff08;如 FigureCanvas&#xff09;&a…
阅读更多...
网络安全基础与应用习题 网络安全基础答案

网络安全基础与应用习题 网络安全基础答案

1.列出并简要给出SSH的定义。 正确答案&#xff1a; 答&#xff1a;6.10传输层协议&#xff1a;提供服务器身份验证、数据保密性和数据完整性&#xff0c;并具有前向保密性&#xff08;即&#xff0c;如果在一个会话期间密钥被破坏&#xff0c;则知识不会影响早期会话的安全性&…
阅读更多...
文件上传复现

文件上传复现

1、什么是文件上传漏洞&#xff1f; 答&#xff1a;文件上传漏洞是指攻击者通过上传恶意文件到服务器、从而执行任意代码、获取系统权限或者破坏系统安全的漏洞、常见于允许用户上传文件的Web应用程序中。 2. 文件上传漏洞形成原因 未验证文件类型&#xff1a;未对上传文件的…
阅读更多...
【网络安全工程】任务12：网络安全设备

【网络安全工程】任务12：网络安全设备

目录 一、防火墙​ 1、作用​ 2、配置方式​ 3、存在的漏洞​ 二、入侵检测系统&#xff08;IDS&#xff09;和入侵防御系统&#xff08;IPS&#xff09;​ 1、作用​ 2、配置方式​ 3、存在的漏洞​ 三、防病毒网关​ ​1、作用​ 2、配置方式​ 3、存在的漏洞​ …
阅读更多...
Docker容器与宿主机目录映射深度解析

Docker容器与宿主机目录映射深度解析

哈喽&#xff0c;大家好&#xff0c;我是木头左&#xff01; 一、Docker容器与宿主机目录映射基础原理 在深入了解如何查询 Docker 容器目录在宿主机的映射目录之前&#xff0c;有必要先明晰其背后的基础原理。Docker 容器通过挂载&#xff08;mount&#xff09;机制将宿主机的…
阅读更多...
DeepSeek+Maxkb+Ollama+Docker搭建一个AI问答系统

DeepSeek+Maxkb+Ollama+Docker搭建一个AI问答系统

DeepSeekMaxkbOllamaDocker搭建一个AI问答系统 文章目录 DeepSeekMaxkbOllamaDocker搭建一个AI问答系统前言一、创建同一内网的网络二、拉取两个镜像三、启动Ollama以及调试Maxkb4.Maxkb创建一个应用并建立知识库5、应用效果总结 前言 我觉得只要是使用Docker技术&#xff0c;…
阅读更多...
决策树，Laplace 剪枝与感知机

决策树，Laplace 剪枝与感知机

1.决策树 决策树是一种用于分类任务的监督学习算法。它基于特征的划分来做出决策&#xff0c;每个节点表示一个特征&#xff0c;每条分支代表该特征的可能取值&#xff0c;每个叶子节点代表分类结果。 用通俗的话来说&#xff0c;决策树就像一个**"如果……那么……&quo…
阅读更多...
使用DeepSeek+蓝耘快速设计网页简易版《我的世界》小游戏

使用DeepSeek+蓝耘快速设计网页简易版《我的世界》小游戏

前言&#xff1a;如今&#xff0c;借助先进的人工智能模型与便捷的云平台&#xff0c;即便是新手开发者&#xff0c;也能开启创意游戏的设计之旅。DeepSeek 作为前沿的人工智能模型&#xff0c;具备强大的功能与潜力&#xff0c;而蓝耘智算云平台则为其提供了稳定高效的运行环境…
阅读更多...
标准卷积（Standard Convolution）

标准卷积（Standard Convolution）

标准卷积的基础操作图解&#xff1a; 卷积之后尺寸公式&#xff1a; 输入尺寸&#xff1a;WH卷积核尺寸&#xff1a;Fw​Fh​填充大小&#xff1a;P步长&#xff1a;S 输出尺寸 WoutHout可以通过以下公式计算&#xff1a; 其中[x]表示向下取整。 实例&#xff1a; 输入图像…
阅读更多...
使用 Elastic-Agent 或 Beats 将 Journald 中的 syslog 和 auth 日志导入 Elastic Stack

使用 Elastic-Agent 或 Beats 将 Journald 中的 syslog 和 auth 日志导入 Elastic Stack

作者&#xff1a;来自 Elastic TiagoQueiroz 我们在 Elastic 一直努力将更多 Linux 发行版添加到我们的支持矩阵中&#xff0c;现在 Elastic-Agent 和 Beats 已正式支持 Debian 12&#xff01; 本文演示了我们正在开发的功能&#xff0c;以支持使用 Journald 存储系统和身份验…
阅读更多...
ArcGIS Pro中字段的新建方法与应用

ArcGIS Pro中字段的新建方法与应用

一、引言 在地理信息系统&#xff08;GIS&#xff09;的数据管理和分析过程中&#xff0c;字段操作起着至关重要的作用。 无论是进行地图制作、空间分析还是数据统计&#xff0c;字段都是承载属性信息的基本单元。 ArcGIS Pro作为一款功能强大的GIS软件&#xff0c;为用户提…
阅读更多...
企业如何选择网站模版快速建站？

企业如何选择网站模版快速建站？

企业想拥有一个专业和功能齐全的官网事关重要。然而&#xff0c;对于新手用户&#xff0c;从基础开始创建网站可能是一件较为复杂和麻烦的过程。今天的文章从零开始给介绍一下如何搭建网站。 一、先确定建站的主题 用户在开始建站前明确自己建站的目的、是为了宣传网站、还是销…
阅读更多...
Phi-4-multimodal：图、文、音频统一的多模态大模型架构、训练方法、数据细节

Phi-4-multimodal：图、文、音频统一的多模态大模型架构、训练方法、数据细节

Phi-4-Multimodal 是一种参数高效的多模态模型&#xff0c;通过 LoRA 适配器和模式特定路由器实现文本、视觉和语音/音频的无缝集成。训练过程包括多阶段优化&#xff0c;确保在不同模式和任务上的性能&#xff0c;数据来源多样&#xff0c;覆盖高质量网络和合成数据。它的设计…
阅读更多...
北京迅为RK3568开发板OpenHarmony系统南向驱动开发内核HDF驱动框架架构

北京迅为RK3568开发板OpenHarmony系统南向驱动开发内核HDF驱动框架架构

瑞芯微RK3568芯片是一款定位中高端的通用型SOC&#xff0c;采用22nm制程工艺&#xff0c;搭载一颗四核Cortex-A55处理器和Mali G52 2EE 图形处理器。RK3568 支持4K 解码和 1080P 编码&#xff0c;支持SATA/PCIE/USB3.0 外围接口。RK3568内置独立NPU&#xff0c;可用于轻量级人工…
阅读更多...
爬取动态数据，爬取持久化数据

爬取动态数据，爬取持久化数据

1. 动态内容与静态内容的区别 动态内容通常指通过 JavaScript 渲染或异步加载的数据。静态内容则是页面加载时直接可见的内容&#xff0c;通常通过 HTML 直接获取。很多现代网站都使用 JavaScript 动态渲染页面内容&#xff08;例如 AJAX 请求&#xff09;。 头条网站的热榜内…
阅读更多...
rdiff-backup备份

rdiff-backup备份

目录 1. 服务器备份知识点 1.1 备份策略 1.2 备份步骤和宝塔面板简介 1.3 CentOS7重要目录 2. 备份工具 2.1 tar -g 备份演示 2. rsync 备份演示 3. rdiff-backup 备份演示 4. 差异和优缺点 3. rdiff-backup安装和使用 3.1 备份命令rdiff-backup 3.2 恢复命令--…
阅读更多...
【6】字典树学习笔记

【6】字典树学习笔记

前言 WFLS 2023 寒假集训 Day2 大纲里字典树在数据结构里&#xff0c;但是个人认为应该属于字符串&#xff0c;就把它放到字符串里了 字典树 字典树&#xff0c;又称Trie树&#xff0c;字母树。每个顶点代表一个字符&#xff0c;从根节点到叶子节点的路径上所有的节点的字符…
阅读更多...
Aim Robotics电动胶枪：机器人涂胶点胶的高效解决方案

Aim Robotics电动胶枪：机器人涂胶点胶的高效解决方案

在自动化和智能制造领域&#xff0c;机器人技术的应用越来越广泛&#xff0c;而涂胶和点胶作为生产过程中的重要环节&#xff0c;也逐渐实现了自动化和智能化。Aim Robotics作为一家专注于机器人技术的公司&#xff0c;其推出的电动胶枪为这一领域带来了高效、灵活且易于操作的…
阅读更多...
Camel AI Owl + 阿里云QWQ 本地部署

Camel AI Owl + 阿里云QWQ 本地部署

在 Windows 环境下&#xff0c;部署 Camel AI Owl 并集成阿里云百炼 DeepSeek-R1 API。通过循序渐进的详细说明&#xff0c;你将轻松完成从环境配置到系统落地的全过程。 目录 环境准备Windows 下创建虚拟环境并安装依赖部署 Camel AI Owl配置阿里云百炼 DeepSeek-R1 API测试与…
阅读更多...
基于django+pytorch(Faster R-CNN)的钢材缺陷识别系统

基于django+pytorch(Faster R-CNN)的钢材缺陷识别系统

一、训练数据来源以及数据标注 数据来源于阿里云天池实验室公开数据集中的铝型材缺陷检测数据集APDDD 数据标注通过labelme进行标注&#xff0c;图片所有标注以转化为矩形标注&#xff0c;存放成json格式。 二、模型训练方式及结果 缺陷识别模型基于Faster R-CNN ResNet5…
阅读更多...
最新文章

Copyright @ 2022~2023