element-plus 的form表单组件之el-radio(单选按钮组件)

单选按钮组件适用于同一组类型的选项只能互斥选择的场景,就是支持单选。单选组件包含以下3个组件

组件名作用
el-radio-group单选组组件,子元素可以是el-radio或el-radio-button,v-mode绑定单选组的响应式属性
el-radio单选组件,label用于展示,value对应选中的值
el-radio-button单选组件的按钮形式
<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue'
import type { FormInstance,FormRules  } from 'element-plus'const goodType1=ref(1)
const goodType2=ref(1)
const goodType3=ref()interface Good {goodName:stringstock:numbercreateDate:Datedescription:stringgoodType:number
}const goodForm=ref<Good>({goodName:"",stock:10,createDate:new Date(),description:"",goodType:2
});const handlerChange=(value)=>{console.log(value);
}</script><template><el-form :model="goodForm" status-icon label-position="left" label-width="auto" ref="formRef"><el-form-item label="商品类型" prop="goodType"><el-radio-group v-model="goodForm.goodType"><el-radio  label="食品类" :value="1"></el-radio><el-radio  label="电器类" :value="2"></el-radio> <el-radio  label="服装类" :value="3"></el-radio> </el-radio-group></el-form-item><el-form-item label="商品类型" prop="goodName"><el-radio-group v-model="goodType2"><el-radio-button  label="食品类" :value="1"></el-radio-button><el-radio-button  label="电器类" :value="2"></el-radio-button> <el-radio-button  label="服装类" :value="3"></el-radio-button> </el-radio-group></el-form-item><el-form-item label="商品类型" prop="goodName"><el-radio-group v-model="goodType2" @change="handlerChange"><el-radio  label="食品类" :value="1" border></el-radio><el-radio  label="电器类" :value="2" border> </el-radio> <el-radio  label="服装类" :value="3" border></el-radio> </el-radio-group></el-form-item></el-form></template><style scoped></style>

在这里插入图片描述
在这里插入图片描述
https://element-plus.org/zh-CN/component/radio.html#radio-api

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

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

相关文章

阶段三:项目开发---搭建项目前后端系统基础架构:任务9:导入空管基础数据

任务描述 本阶段任务是导入项目的基础数据&#xff0c;包括空管基础数据和离线的实时飞行数据&#xff08;已经脱敏&#xff09;。 任务指导 本阶段任务需要导入两种数据&#xff1a; 1、在MySQL中导入空管基础数据 kongguan.sql空管基础数据表说明&#xff1a; 1告警信息…

OpenCV直方图计算函数calcHist的使用

操作系统&#xff1a;ubuntu22.04OpenCV版本&#xff1a;OpenCV4.9IDE:Visual Studio Code编程语言&#xff1a;C11 功能描述 图像的直方图是一种统计表示方法&#xff0c;用于展示图像中不同像素强度&#xff08;通常是灰度值或色彩强度&#xff09;出现的频率分布。具体来说…

对MsgPack与JSON进行序列化的效率比较

序列化是将对象转换为字节流的过程&#xff0c;以便在内存或磁盘上存储。常见的序列化方法包括MsgPack和JSON。以下将详细探讨MsgPack和JSON在序列化效率方面的差异。 1. MsgPack的效率&#xff1a; 优点&#xff1a; 高压缩率&#xff1a; MsgPack采用高效的二进制编码格式&…

Embedding理解

一、概念 Embedding 可以理解为一种将概念、物体或信息转换为数字序列的数值表示方法。它是沟通两个不同世界或领域的桥梁,能够把各种类型的数据(如文本、图像、视频等)映射到一个向量空间中。 在这个向量空间里,相似的项目(例如语义上相近的单词、相似的图像或相关的视…

cs231n作业1——SVM

参考文章&#xff1a;cs231n assignment1——SVM SVM 训练阶段&#xff0c;我们的目的是为了得到合适的 &#x1d44a; 和 &#x1d44f; &#xff0c;为实现这一目的&#xff0c;我们需要引进损失函数&#xff0c;然后再通过梯度下降来训练模型。 def svm_loss_naive(W, …

【Qt】Qt概述

目录 一. 什么是Qt 二. Qt的优势 三. Qt的应用场景 四. Qt行业发展方向 一. 什么是Qt Qt是一个跨平台的C图形用户界面应用程序框架&#xff0c;为应用程序开发者提供了建立艺术级图形界面所需的所有功能。 Qt是完全面向对象的&#xff0c;很容易扩展&#xff0c;同时Qt为开发…

从打印到监测:纳米生物墨水助力3D生物打印与组织监测平台?

从打印到监测&#xff1a;纳米生物墨水助力3D生物打印与组织监测平台&#xff1f; 在 3D 组织工程中&#xff0c;纳米生物墨水是将纳米材料与 ECM 水凝胶结合&#xff0c;以提高其打印性和功能性的重要策略。纳米生物墨水可以增强水凝胶的机械性能、导电性、生物活性&#xff…

汽车报价资讯app小程序模板源码

蓝色实用的汽车报价&#xff0c;汽车新闻资讯&#xff0c;最新上市汽车资讯类小程序前端模板。包含&#xff1a;选车、资讯列表、榜单、我的主页、报价详情、资讯详情、询底价、登录、注册、车贷&#xff0c;油耗、意见反馈、关于我们等等。这是一款非常全的汽车报价小程序模板…

MNIST 数据集 ubyte 格式介绍

train-images-idx1-ubyte 文件是用于存储 MNIST 数据集中手写数字图像数据的文件。与标签文件类似&#xff0c;这个文件使用的是一种简单而紧凑的二进制格式。具体的文件格式如下&#xff1a; 文件头&#xff08;Header&#xff09;&#xff1a; 文件头部分包含了一些描述文件内…

Ubuntu 20版本安装Redis教程,以及登陆

第一步 切换到root用户&#xff0c;使用su命令&#xff0c;进行切换。 输入&#xff1a; su - 第二步 使用apt命令来搜索redis的软件包&#xff0c;输入命令&#xff1a;apt search redis 第三步 选择需要的redis版本进行安装&#xff0c;本次选择默认版本&#xff0c;redis5.…

Emacs 的优点及与 DE 的比较

一、引言 在编程领域&#xff0c;对于工具的选择一直是开发者们热议的话题。今天&#xff0c;我们来探讨一下 Emacs 及其所具有的优点&#xff0c;并思考使用 Emacs 写程序是否真的比使用集成开发环境&#xff08;IDE&#xff09;更方便。 二、Emacs 的优点 高度可定制性 可以…

mac如何安装nvm

​ vue项目开发&#xff0c;热更新&#xff0c;webpack&#xff0c;前辈造的轮子&#xff1a;各类的工具&#xff0c;库&#xff0c;像axios,qs,cookie等轮子在npm上可以拿来直接用&#xff0c;需要node作为环境支撑。 开发时同时有好几个项目&#xff0c;每个项目的需求不同…

Tornado:高性能异步Web框架详解

文章目录 引言官网链接Tornado 原理1. 非阻塞I/O2. 异步编程3. 事件循环4. 轻量级 使用方法安装Tornado创建一个简单的Web服务器 优缺点优点缺点 结论 引言 在Web开发的广阔领域中&#xff0c;处理高并发和实时性需求一直是开发者们面临的挑战。Tornado&#xff0c;作为一个由…

威纶通创建项目创建(输入,输出,画面切换使用)

创建一个项目 1&#xff0c;打开软件 2&#xff0c;创建项目&#xff0c;设置系统参数 增加设备&#xff0c;选择好对应型号&#xff08;有市面上80%设备&#xff09; 3&#xff0c;修改页面&#xff0c;选择参数 4&#xff0c;创建新页面 不能在已经编辑的页面进行新增 5&a…

【HTML入门】第三课 - 标题、段落、空格

这一小节&#xff0c;我们说一些比较零散的知识&#xff0c;HTML课程中呢&#xff0c;其实就是一些标签&#xff0c;正是这些标签组成了前端网页的各种元素&#xff0c;所以你也可以叫他们标签元素。 像前两节我们说的&#xff0c;html head body title meta style 。这些都是…

【考研】南邮历年复试上机试题目与题解

【考研】南邮历年复试上机试题目与题解 文章目录 【考研】南邮历年复试上机试题目与题解个人题目难度评估历年上机题目PROB1002 求最值问题PROB1003 新对称素数问题PROB1004 进制转换PROB1005 涂色问题 (待补)PROB1006 最大公约数和最小公倍数PROB1007 斐波那契数列PROB1008 回…

解决Spring Boot中的数据库连接池问题

解决Spring Boot中的数据库连接池问题 大家好&#xff0c;我是微赚淘客系统3.0的小编&#xff0c;也是冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01; 1. 理解数据库连接池的重要性 数据库连接池在任何使用数据库的应用程序中都起着至关重要的作用。它们管理和维…

解析Java中的动态代理与静态代理的区别

解析Java中的动态代理与静态代理的区别 大家好&#xff0c;我是微赚淘客系统3.0的小编&#xff0c;也是冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01; 1. 引言 代理模式是软件开发中常用的一种设计模式&#xff0c;用于控制对其它对象的访问。在Java中&#xf…

C#中的Task.Delay(2000).Wait() 与await Task.Delay(2000)

Task.Delay(2000).Wait() 和 await Task.Delay(2000) 在功能上看似相似&#xff0c;都用于等待一段时间&#xff08;在这个例子中是2000毫秒&#xff09;&#xff0c;但它们在使用方式和背后的行为上存在一些关键差异。 .Result 是 Task 类的一个属性&#xff0c;它用于获取任务…

算法刷题笔记 滑动窗口(C++实现,非常详细)

文章目录 题目描述基本思路实现代码 题目描述 给定一个大小为n ≤ 10^6的数组。有一个大小为k的滑动窗口&#xff0c;它从数组的最左边移动到最右边。你只能在窗口中看到k个数字。每次滑动窗口向右移动一个位置。以下是一个例子&#xff1a; 该数组为 [1 3 -1 -3 5 3 6 7]&…