ElementUI Form:Radio 单选框
ElementUI安装与使用指南
Radio 单选框
点击下载learnelementuispringboot项目源码
效果图
el-radio.vue (Radio 单选框)页面效果图
项目里el-radio.vue代码
<script>
export default {name: 'el_radio',data() {return {radio: '1',radio2: '2',radio3: 3,radio4: '上海',radio5: '上海',radio6: '上海',radio7: '上海',radio8: '1',radio9: '1',radio10: '1',radio11: '1'}}
}</script><template><div><h1>element组件:el-radio</h1><el-divider/><el-row><el-button type="text">基础用法</el-button>由于选项默认可见,不宜过多,若选项过多,建议使用 Select 选择器。</el-row><p>要使用 Radio 组件,只需要设置v-model绑定变量,选中意味着变量的值为相应 Radiolabel属性的值,label可以是String、Number或Boolean。</p><el-radio v-model="radio" lable='1'>男</el-radio><el-radio v-model="radio" label='2'>女</el-radio><br/><el-row><el-button type="text">禁用状态</el-button><el-radio disabled v-model="radio2" label="1">男</el-radio><el-radio disabled v-model="radio2" label="2">女</el-radio></el-row><br/><el-row><el-button type="text">单选框组</el-button>适用于在多个互斥的选项中选择的场景</el-row><p>结合el-radio-group元素和子元素el-radio可以实现单选组,在el-radio-group中绑定v-model,在el-radio中设置好label即可,无需再给每一个el-radio绑定变量,另外,还提供了change事件来响应变化,它会传入一个参数value。</p><el-radio-group v-model="radio3"><el-radio :label="3">备选项</el-radio><el-radio :label="6">备选项</el-radio><el-radio :label="9">备选项</el-radio></el-radio-group><el-row><el-button type="text">按钮样式</el-button>按钮样式的单选组合。只需要把el-radio元素换成el-radio-button元素即可,此外,Element 还提供了size属性。</el-row><div><el-radio-group v-model="radio4"><el-radio-button label="上海"></el-radio-button><el-radio-button label="北京"></el-radio-button><el-radio-button label="广州"></el-radio-button><el-radio-button label="深圳"></el-radio-button></el-radio-group></div><div style="margin-top: 20px"><el-radio-group v-model="radio5" size="medium"><el-radio-button label="上海"></el-radio-button><el-radio-button label="北京"></el-radio-button><el-radio-button label="广州"></el-radio-button><el-radio-button label="深圳"></el-radio-button></el-radio-group></div><div style="margin-top: 20px"><el-radio-group v-model="radio6" size="small"><el-radio-button label="上海"></el-radio-button><el-radio-button label="北京" disabled></el-radio-button><el-radio-button label="广州"></el-radio-button><el-radio-button label="深圳"></el-radio-button></el-radio-group></div><div style="margin-top: 20px"><el-radio-group v-model="radio7" disabled size="mini"><el-radio-button label="上海"></el-radio-button><el-radio-button label="北京"></el-radio-button><el-radio-button label="广州"></el-radio-button><el-radio-button label="深圳"></el-radio-button></el-radio-group></div><el-row><el-button type="text">带有边框</el-button>设置border属性可以渲染为带有边框的单选框。</el-row><div><el-radio v-model="radio8" label="1" border>备选项1</el-radio><el-radio v-model="radio8" label="2" border>备选项2</el-radio></div><div style="margin-top: 20px"><el-radio v-model="radio9" label="1" border size="medium">备选项1</el-radio><el-radio v-model="radio9" label="2" border size="medium">备选项2</el-radio></div><div style="margin-top: 20px"><el-radio-group v-model="radio10" size="small"><el-radio label="1" border>备选项1</el-radio><el-radio label="2" border disabled>备选项2</el-radio></el-radio-group></div><div style="margin-top: 20px"><el-radio-group v-model="radio11" size="mini" disabled><el-radio label="1" border>备选项1</el-radio><el-radio label="2" border>备选项2</el-radio></el-radio-group></div></div></template><style scoped></style>
Radio Attributes
Radio Events
Radio-group Attributes
Radio-group Events
Radio-button Attributes
相关文章:
ElementUI Form:Radio 单选框
ElementUI安装与使用指南 Radio 单选框 点击下载learnelementuispringboot项目源码 效果图 el-radio.vue (Radio 单选框)页面效果图 项目里el-radio.vue代码 <script> export default {name: el_radio,data() {return {radio: 1,radio2: 2,ra…...
react-activation实现缓存,且部分页面刷新缓存,清除缓存
1.安装依赖 npm i -S react-activation2.使用AliveScope 包裹根组件 import { AliveScope } from "react-activation" <AliveScope><Router><Switch><Route exact path"/" render{() > <Redirect to"/login" push …...
idea 中 tomcat 乱码问题修复
之前是修改 Tomcat 目录下 conf/logging.properties 的配置,将 UTF-8 修改为 GBK,现在发现不用这样修改了。只需要修改 IDEA 中 Tomcat 的配置就可以了。 修改IDEA中Tomcat的配置:添加-Dfile.encodingUTF-8 本文结束...
Modbus协议学习第七篇之libmodbus库API介绍(modbus_write_bits等)
写在前面 在第六篇中我们介绍了基于libmodbus库的演示代码,那本篇博客就详细介绍一下第六篇的代码中使用的基于该库的API函数。另各位读者,Modbus相关知识受众较少,如果觉得我的专栏文章有帮助,请一定点个赞,在此跪谢&…...
第九节HarmonyOS 常用基础组件13-TimePicker
1、描述 时间选择组件,根据指定参数创建选择器,支持选择小时以及分钟。默认以24小时的时间区间创建滑动选择器。 2、接口 TimePicker(options?: {selected?: Date}) 3、参数 selected - Date - 设置选中项的时间。默认是系统当前的时间。 4、属性…...
力扣刷题-55.跳跃游戏
给你一个非负整数数组 nums ,你最初位于数组的 第一个下标 。数组中的每个元素代表你在该位置可以跳跃的最大长度。 判断你是否能够到达最后一个下标,如果可以,返回 true ;否则,返回 false 。 class Solution { publ…...
Ruby安装演示教程
安装 Ruby 的过程会根据您的操作系统(如 Windows、MacOS、Linux)而有所不同。以下是在这些主要平台上安装 Ruby 的基本指南。 在 Windows 上安装 Ruby 下载 Ruby Installer:访问 RubyInstaller 官方网站下载适合您系统的 Ruby Installer 版…...
前端使用vue-simple-uploader进行分片上传
目录 一、安装vue-simple-uploader 二、在vue中使用 一、安装vue-simple-uploader npm install vue-simple-uploader --save main.js初始化vue-simple-uploader import uploader from vue-simple-uploaderVue.use(uploader) common/config文件 export const ACCEPT_CONF…...
Java 源代码中常见的数据类型
在Java源代码中,常见的数据类型包括基本数据类型(Primitive Data Types)和引用数据类型(Reference Data Types)。这些数据类型在Java中用于存储不同种类的数据,如整数、小数、字符、布尔值以及对象等。 1.…...
Web3行业研究逐步加强,“链上数据”缘何成为关注焦点?
据中国电子报报道,近日,由中关村区块链产业联盟指导,中国信息通信研究院牵头,欧科云链控股有限公司参与编写的《全球Web3产业全景与发展趋势研究报告(2023年)》正式发布。研究报告通过全面追踪国内外Web3产…...
逸学区块链【solidity】真随机数
参考Get a Random Number | Chainlink Documentation 但是很贵,价格 Gas Price:当前gas价格,根据网络状况而波动。Callback gas :返回您所请求的随机值时,回调请求消耗的gas 量。验证gas :量gas 用于验证…...
【WPF.NET开发】优化性能:对象行为
本文内容 不删除对象的事件处理程序可能会使对象保持活动状态依赖属性和对象Freezable 对象用户界面虚拟化 了解 WPF 对象的内部行为有助于在功能和性能之间做出适当的取舍。 1、不删除对象的事件处理程序可能会使对象保持活动状态 对象传递给其事件的委托是对该对象的有效…...
uniapp中封装一个svg转base64的组件
uniapp中由于不支持svg--》base64,同时无法使用h5中atob,这里我们采用js-base64插件实现这样一个组件,只要传人svg的代码即可在uniapp中转为base64,同时支持自定义参数,比如宽度,高度,等 1 安装 npm inst…...
QT播放gstreamer命令(三)---使用QMediaPlayer
前文: 因为之前听说过,QMediaPlayer已经集成了gstreamer,但是并没有什么接口来例子来说明,根本看不出来有任何gstreamer的形式,于是在QT5助手里面搜了一下,发现确实有gstreamer的痕迹,但是例子写…...
Ubuntu22扩大分区
一台Ubuntu一直以为扩展成功了的,但是用起来空间不够,才发现空间还是那么小,所以赶快想办法扩展。 首先尝试使用gparted软件,结果在软件里面发现硬盘分区/dev/sda3已经全分配78G了。 但是看df -H,明明没有扩展: /dev…...
数据结构篇-05:哈希表解决字母异位词分组
本文对应力扣高频100 ——49、字母异位词分组 哈希表最大的特点就是它可以把搜索元素的时间复杂度降到O(1)。这一题就是要我们找到 “字母异位词” 并把它们放在一起。 “字母异位词”就是同一个单词中字母的不同组合形式。判断“字母异位词”有两个视角:1、所含字…...
添加了gateway之后远程调用失败
前端提示500,后端提示[400 ] during [GET] to [http://userservice/user/1] 原因是这个,因为在请求地址写了两个参数,实际上只传了一个参数 解决方案:加上(required false)并重启所有相关服务...
C#,哥伦布数(Golomb Number)的算法与源代码
1 哥伦布数(Golomb Number) 哥伦布数(Golomb Number)是一个自然数的非减量序列,使得n在序列中正好出现G(n)次。前几个15的G(n)值为:1 2 2 3 3 4 4 4 5 5 5 6…...
JVM学习
1.Java虚拟机内部有哪些线程共享,那些线程隔离 程序计数器: 通过改变这个计数器的值来选取下一条需要执行的字节码命令 Java虚拟机栈: 栈,每个方法被执行时,Java虚拟机都会同步的创建一个栈帧用于存储局部变量表&…...
Visual Studio 20XX中utf-8中文在控制台显示乱码
文章目录 在 Visual Studio 20xx中,如果源码文件是 UTF8编码,要打印中文到控制台时,控制台会显示乱码,可以进行以下设置。 包含<Windows.h>头文件。在main函数初始调用SetConsoleOutputCP(CP_UTF8)设置控制台输出字符集为UT…...
基于算法竞赛的c++编程(28)结构体的进阶应用
结构体的嵌套与复杂数据组织 在C中,结构体可以嵌套使用,形成更复杂的数据结构。例如,可以通过嵌套结构体描述多层级数据关系: struct Address {string city;string street;int zipCode; };struct Employee {string name;int id;…...
SkyWalking 10.2.0 SWCK 配置过程
SkyWalking 10.2.0 & SWCK 配置过程 skywalking oap-server & ui 使用Docker安装在K8S集群以外,K8S集群中的微服务使用initContainer按命名空间将skywalking-java-agent注入到业务容器中。 SWCK有整套的解决方案,全安装在K8S群集中。 具体可参…...
【JavaEE】-- HTTP
1. HTTP是什么? HTTP(全称为"超文本传输协议")是一种应用非常广泛的应用层协议,HTTP是基于TCP协议的一种应用层协议。 应用层协议:是计算机网络协议栈中最高层的协议,它定义了运行在不同主机上…...
2025年能源电力系统与流体力学国际会议 (EPSFD 2025)
2025年能源电力系统与流体力学国际会议(EPSFD 2025)将于本年度在美丽的杭州盛大召开。作为全球能源、电力系统以及流体力学领域的顶级盛会,EPSFD 2025旨在为来自世界各地的科学家、工程师和研究人员提供一个展示最新研究成果、分享实践经验及…...
uni-app学习笔记二十二---使用vite.config.js全局导入常用依赖
在前面的练习中,每个页面需要使用ref,onShow等生命周期钩子函数时都需要像下面这样导入 import {onMounted, ref} from "vue" 如果不想每个页面都导入,需要使用node.js命令npm安装unplugin-auto-import npm install unplugin-au…...
基于Uniapp开发HarmonyOS 5.0旅游应用技术实践
一、技术选型背景 1.跨平台优势 Uniapp采用Vue.js框架,支持"一次开发,多端部署",可同步生成HarmonyOS、iOS、Android等多平台应用。 2.鸿蒙特性融合 HarmonyOS 5.0的分布式能力与原子化服务,为旅游应用带来…...
2.Vue编写一个app
1.src中重要的组成 1.1main.ts // 引入createApp用于创建应用 import { createApp } from "vue"; // 引用App根组件 import App from ./App.vue;createApp(App).mount(#app)1.2 App.vue 其中要写三种标签 <template> <!--html--> </template>…...
智能在线客服平台:数字化时代企业连接用户的 AI 中枢
随着互联网技术的飞速发展,消费者期望能够随时随地与企业进行交流。在线客服平台作为连接企业与客户的重要桥梁,不仅优化了客户体验,还提升了企业的服务效率和市场竞争力。本文将探讨在线客服平台的重要性、技术进展、实际应用,并…...
现代密码学 | 椭圆曲线密码学—附py代码
Elliptic Curve Cryptography 椭圆曲线密码学(ECC)是一种基于有限域上椭圆曲线数学特性的公钥加密技术。其核心原理涉及椭圆曲线的代数性质、离散对数问题以及有限域上的运算。 椭圆曲线密码学是多种数字签名算法的基础,例如椭圆曲线数字签…...
Yolov8 目标检测蒸馏学习记录
yolov8系列模型蒸馏基本流程,代码下载:这里本人提交了一个demo:djdll/Yolov8_Distillation: Yolov8轻量化_蒸馏代码实现 在轻量化模型设计中,**知识蒸馏(Knowledge Distillation)**被广泛应用,作为提升模型…...






