ElementUI Form:Radio 单选框

Radio 单选框

点击下载learnelementuispringboot项目源码

效果图

在这里插入图片描述
el-radio.vue 页面效果图
在这里插入图片描述

项目里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绑定变量,选中意味着变量的值为相应 Radio
      label属性的值,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>

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

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

相关文章

微信小程序如何实现点击上传图片功能

如下所示,实际需求中常常存在需要点击上传图片的功能,上传前显示边框表面图片显示大小,上传后将图形缩放到边框大小。 实现如下: .wxml <view class="{{img_src==?blank-area:}}" style="width:100%;height:40%;display:flex;align-items: center;jus…

【C++航海王:追寻罗杰的编程之路】引用、内联、auto关键字、基于范围的for、指针空值nullptr

目录 1 -> 引用 1.1 -> 引用概念 1.2 -> 引用特性 1.3 -> 常引用 1.4 -> 使用场景 1.5 -> 传值、传引用效率比较 1.6 -> 值和引用作为返回值类型的性能比较 1.7 -> 引用和指针的区别 2 -> 内联函数 2.1 -> 概念 2.2 -> 特性 3 -…

聊聊DoIP吧

DoIP是啥? DoIP代表"Diagnostic over Internet Protocol",即互联网诊断协议。它是一种用于在车辆诊断中进行通信的网络协议。DoIP的目标是在现代汽车中实现高效的诊断和通信。通过使用互联网协议(IP)作为通信基础,DoIP使得诊断信息能够通过网络进行传输,从而提…

Uniapp小程序端打包优化实践

背景描述&#xff1a; 在我们最近开发的一款基于uniapp的小程序项目中&#xff0c;随着功能的不断丰富和完善&#xff0c;发现小程序包体积逐渐增大&#xff0c;加载速度也受到了明显影响。为了提升用户体验&#xff0c;团队决定对小程序进行一系列打包优化。 项目优化点&…

近期作业总结(函数,递归,二进制)

二分查找函数 写一个二分查找函数 功能&#xff1a;在一个升序数组中查找指定的数值&#xff0c;找到了就返回下标&#xff0c;找不到就返回-1。 int bin_search(int arr[], int left, int right, int key) {int mid 0;while (left < right) {mid (right left) / 2;if…

Labview 图像处理系统设计

1. 总体主界面设计 前面板界面如下&#xff1a; 界面总共分为一个实时采集加拍照控制模块&#xff0c;两个图像显示模块&#xff08;实时图像显示和直方图显示&#xff09;以及三个图像处理模块 前面板中各模块具体功能及使用说明如下&#xff1a; 1.当实时按钮关闭时&#x…

代码随想录day15--二叉树的应用3

LeetCode110--平衡二叉树 题目描述&#xff1a; 给定一个二叉树&#xff0c;判断它是否是高度平衡的二叉树。 本题中&#xff0c;一棵高度平衡二叉树定义为&#xff1a; 一个二叉树每个节点 的左右两个子树的高度差的绝对值不超过 1 。 示例 1&#xff1a; 输入&#xff1a…

Kotlin快速入门系列8

Kotlin的泛型 与Java一样&#xff0c;Kotlin也提供泛型。泛型&#xff0c;即 "参数化类型"&#xff0c;将类型参数化&#xff0c;可以用在类&#xff0c;接口&#xff0c;方法上。可以为类型安全提供保证&#xff0c;消除类型强转的烦恼。声明泛型类的格式如下&…

《CSS3》田字网格背景(外实线内虚线)的实现

一、前言 记录一些有趣的CSS实现方式&#xff0c;总所周知&#xff0c;当一段效果可以通过CSS实现的时候&#xff0c;绝不使用Javascript来实现&#xff0c;因此记录一些有意思的CSS效果&#xff0c;一来是方便自己学习&#xff0c;另一来是方便以后在需要使用到的时候能快速找…

基于yolov2深度学习网络的视频手部检测算法matlab仿真

目录 1.算法运行效果图预览 2.算法运行软件版本 3.部分核心程序 4.算法理论概述 5.算法完整程序工程 1.算法运行效果图预览 输入mp4格式的视频文件进行测试&#xff0c;视频格式为1080p30. 2.算法运行软件版本 matlab2022a 3.部分核心程序 ..........................…

burp靶场--xss下篇【16-30】

burp靶场–xss下篇【16-30】 https://portswigger.net/web-security/all-labs#cross-site-scripting 实验16&#xff1a;允许使用一些 SVG 标记的反射型 XSS ### 实验要求&#xff1a; 该实验室有一个简单的反射型 XSS漏洞。该网站阻止了常见标签&#xff0c;但错过了一些 S…

win wsl2 Ubuntu-22.04 设置时间为国内时间

使用 wsl2 安装 Ubuntu-22.04 后 时间不正确&#xff0c;主要有两个原因 时区设置不正确&#xff0c;国内为京八区。 时区正确后&#xff0c;没有同步时间。&#xff08;大部分人容易忽略这一点&#xff09; Linux 默认情况下使用 UTC 格式作为标准时间格式&#xff0c;如果在…

云原生Kubernetes: Ubuntu 安装 K8S 1.23版本(单Master架构) 及故障恢复

目录 一、实验 1.环境 2.安装 Ubuntu 3.连接Ubuntu 4.master节点安装docker 5.node节点安装docker 6.master节点安装K8S 7.添加K8S工作节点 8.安装网络插件calico 9.故障 10.故障恢复 11.测试k8s网络和coredns 二、问题 1.Ubuntu如何修改镜像源 2.Ubuntu和Windo…

STM32F407移植OpenHarmony笔记3

接上一篇&#xff0c;搭建完环境&#xff0c;找个DEMO能跑&#xff0c;现在我准备尝试从0开始搬砖。 首先把/device和/vendor之前的代码全删除&#xff0c;这个时候用hb set命令看不到任何项目了。 /device目录是硬件设备目录&#xff0c;包括soc芯片厂商和board板级支持代码…

Qt 基础之QDataTime

Qt 基础之QDataTime 引言一、获取(设定)日期和时间二、时间戳三、时间计算 (重载运算符) 引言 QDataTime是Qt框架中用于处理日期和时间的类。它提供了操作和格式化日期、时间和日期时间组合的功能。QDataTime可以用于存储和检索日期和时间、比较日期和时间、对日期和时间执行算…

华为——NGFW Module安装在集群交换机上,二层双机负载分担部署,交换机重定向引流

NGFW Module安装在集群交换机上&#xff0c;二层双机负载分担部署&#xff0c;交换机重定向引流 业务需求 如图1所示&#xff0c;两台交换机集群组网&#xff0c;两块NGFW Module分别安装在两台交换机的1号槽位组成双机负载分担组网。NGFW Module工作在二层&#xff0c;也就是…

FileViewer纯前端预览项目Vue2 demo

FileViewer 项目Vue2 demo 本demo基于vue-clijsvue2.x构建&#xff0c;如果您需要vue3版本的demo&#xff0c;请前往main分支。 适用于Vue2 Webpack&#xff0c;本集成方法要求最低Webpack版本为5&#xff0c;也就是Vue Cli Service 5.0.0以上&#xff0c;当然&#xff0c;if…

响应式Web开发项目教程(HTML5+CSS3+Bootstrap)第2版 例5-4 Document

代码 <!doctype html> <html> <head> <meta charset"utf-8"> <title>Document</title> </head><body> <canvas id"cavsElem" width"400" height"600">您的浏览器不支持Canvas…

flutter module打包成framework引入原生工程

Flutter - 将 Flutter 集成到现有项目&#xff08;iOS - Framework篇&#xff09; 本篇文章大幅参考了 caijinglong 大佬的总结文章&#xff1a; 把flutter作为framework添加到已存在的iOS中[1] 用 Flutter 来开发&#xff0c;从来都不可能是新开的一个纯 Flutter 项目&#xf…

【LVGL源码移植环境搭建】

LVGL源码移植&环境搭建 ■ LVGL源码移植■ 下载LVGL源码■ 修改LVGL文件夹■■■■ 视频链接 Ubuntu模拟器环境建置 ■ LVGL源码移植 ■ 下载LVGL源码 LVGL源码 我们以选择v8.2.0为例&#xff0c;选择8.2.0下载 ■ 修改LVGL文件夹 1.我们只需要关注这5个文件即可&…
最新文章