el-radio入门学习

已于 2022-05-16 15:41:56 修改
阅读量4k 收藏 1
点赞数
分类专栏： element-ui 文章标签： elementui
于 2022-05-13 10:14:10 首次发布
原文链接：https://element.eleme.cn/#/zh-CN/component/radio
版权
  • 学习内容
  1. el-radio 单选
  2. el-radio-group 单选组
  3. el-radio-button 单选按钮
  4. border 增加边框
  5. disabled 禁用单选框
  6. size 单选大小设置
  • 代码效果图
    在这里插入图片描述
  • 代码展示
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
    <div id='app'>
        <!-- based use -->
        <!-- v-model bind label, label can be Number,String,Boolean -->
        <el-row>
            <el-radio v-model='radioData' :label='1' disabled>number1</el-radio>
            <el-radio v-model='radioData' :label='2'>number2</el-radio>
        </el-row>
        <!-- radio group use -->
        <el-row>
            <el-radio-group v-model='radioData'>
                <el-radio :label='1'>number1</el-radio>
                <el-radio :label='2'>number2</el-radio>
                <el-radio :label='3'>number3</el-radio>
            </el-radio-group>
        </el-row>
        <!-- radio group + radio button + size -->
        <el-row>
            <el-radio-group v-model='radioData'>
                <el-radio-button :label='1'>shanghai</el-radio-button>
                <el-radio-button :label='2'>beijing</el-radio-button>
                <el-radio-button :label='3'>guangzhong</el-radio-button>
                <el-radio-button :label='4'>shenzhen</el-radio-button>
            </el-radio-group>
        </el-row>
        <el-row>
            <el-radio-group v-model='radioData' size='medium'>
                <el-radio-button :label='1'>shanghai</el-radio-button>
                <el-radio-button :label='2'>beijing</el-radio-button>
                <el-radio-button :label='3'>guangzhong</el-radio-button>
                <el-radio-button :label='4'>shenzhen</el-radio-button>
            </el-radio-group>
        </el-row>
        <el-row>
            <el-radio-group v-model='radioData' size='small'>
                <el-radio-button :label='1'>shanghai</el-radio-button>
                <el-radio-button :label='2'>beijing</el-radio-button>
                <el-radio-button :label='3'>guangzhong</el-radio-button>
                <el-radio-button :label='4'>shenzhen</el-radio-button>
            </el-radio-group>
        </el-row>
        <el-row>
            <el-radio-group v-model='radioData' size='mini' disabled>
                <el-radio-button :label='1'>shanghai</el-radio-button>
                <el-radio-button :label='2'>beijing</el-radio-button>
                <el-radio-button :label='3'>guangzhong</el-radio-button>
                <el-radio-button :label='4'>shenzhen</el-radio-button>
            </el-radio-group>
        </el-row>
        <!-- border only add inner will be effect-->
        <el-row>
            <el-radio-group v-model='radioData'>
                <el-radio :label='1' border>number1</el-radio>
                <el-radio :label='2' border>number2</el-radio>
            </el-radio-group>
        </el-row>
        <el-row>
            <el-radio-group v-model='radioData' size='medium'>
                <el-radio :label='1' border>number1</el-radio>
                <el-radio :label='2' border>number2</el-radio>
            </el-radio-group>
        </el-row>
        <el-row>
            <el-radio-group v-model='radioData' size='small'>
                <el-radio :label='1' border>number1</el-radio>
                <el-radio :label='2' border>number2</el-radio>
            </el-radio-group>
        </el-row>
        <el-row>
            <el-radio-group v-model='radioData' size='mini' disabled>
                <el-radio :label='1' border>number1</el-radio>
                <el-radio :label='2' border>number2</el-radio>
            </el-radio-group>
        </el-row>

    </div>
</body>
</html>
<script>
    let vm = new Vue({
        el:'#app',
        data:{
            radioData:1,
        }
    })
</script>

<style>
    .el-row{
        margin-bottom:20px;
    }
</style>

官网地址：elment-ui官网

自律最差的编程狗
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
通用软件无线电平台SDR6862-软件无线电示例程序
11-11
通用软件无线电平台SDR6862-软件无线电示例程序，需要的下
el-select-tree:ElementUI的el-select与el-tree结合
05-07
ElementUI的el-select与el-tree结合在一起。 在线示例 用法 安装 npm install --save el-select-tree 需要element-ui 如果您的项目不使用element-ui，则需要引入一个单独的element-ui包，如下所示： import 'el-...
Element-ui radio单选框CSS样式修改(精细版)
HikingO的博客
11-16 2069
Element-ui 单选框样式修改
el-radio单选框的选中与取消
最新发布
karshey的博客
06-18 604
结果为：第一次点击时选中，之后多次点击都是选中，且控制台输出为false。需求是有一个单选框，点击选中，再次点击取消。
Element el-radio 单选框详解
程序员大阳
01-29 4万+
1. 用途 单选框使用的场景非常普遍，用于列出多个选项，供用户选择其中一个。 注意Select选择器也可以从多个选项中选择一个，单选框的优势是可以在界面上同时显示所有选项，缺点是选项多时占用空间大。 而选择器优势是占用空间小(选项下拉选择时才显示)，缺点是必须要下拉时才能显示所有选项。 2. 单选框 单选框HTML代码如下： <el-radio v-model="radio1" label="male">男</el-radio> <el-radio v-model="
Element 单选框 el-radio 点击改变触发事件使用示例
热门推荐
烂笔头
05-22 7万+
效果： 代码： <el-radio-group v-model="radioTreaty" @change="agreeChange"> <el-radio label="1" border>不同意</el-radio> <el-radio label="2" border>同意</el-rad...
Vue Element Ui中el-radio设置默认值
m0_58565372的博客
09-21 9727
在写项目的时候，尤其是后台管理系统的修改操作，你需要掉后台接口（详情接口）先拿取后台传给你的数据，但是如果单选框的lable不处理，就会看不到单选框选择的是哪一个状态，（其实已经默认选择第一个了，第一个选择框点击不了）如图。有时候后台返回的单选框是number类型的，单选框的lable需要设置成 :lable='0',例如。element ui里面的label类型可以是string、number、boolean，如图。如果后台返回的是string，则正常写，例如。也可以实现上图效果。
element-ui radio 组件源码分享
qq_37309987的博客
03-06 1303
这个属性的实现逻辑和 disabled 属性大致相同，二者都是通过使用计算属性的方式来控制 dom 的最终展示效果，针对于下面的讲解，主要先针对于 el-radio 组件进行详细说明，至于涉及到的 el-radio-group 的部分，将会有一个专门的分享。这个属性相对简单，在交互上主要是为 radio 添加边框，在实现上主要是通过向组件内部传递属性，通过属性判断是否为 radio 增加边框样式。2、属性部分：value，通过这个属性来接收父组件 v-model 传过来的值。
elementUi vue el-radio 监听选中变化的实例代码
01-19
elementUi vue el-radio 监听选中变化的实例代码如下所述： //change是radio-group标签的事件 <el v-model=radioSex change=changeHandler> <el class=radio label=man>男</el> <el class=radio label=woman>女...
ElementUI radio组件选中小改造
01-19
ElementUI 是自己比较钟爱的...具体现象就是，当通过 mapState 方法自动一个计算对象数组，然后将它绑定到 el-radio 上时，el-radio-group 里的 el-radio 无法根据其绑定值正确的显示 checked 状态。 例如下面这段代码
element-ui循环显示radio控件信息的方法
12-29
如下所示： <el label=线路类型： prop=isGive> ... <el label=item.id key=item.id v-for=item>{{item.name}}</el> </el> </el> data () { return { merchantId: 0, centerDialogVisible: fa
解决vue中el-tab-pane切换的问题
10-15
在Vue开发过程中，Element UI库提供了丰富的UI组件，其中`el-tabs`组件用于实现标签页切换功能。在本文中，我们将深入探讨如何解决Vue中`el-tab-pane`切换时遇到的问题，以及如何优化和管理组件的渲染。 首先，问题...
el-table-infinite-scroll:El-Table无限滚动
05-26
element-ui 的表格与无限滚动的结合（el-table + infinite-scroll）。查看实例教程此指令依赖于 element-ui@2.12.0，使用前请熟悉：element-ui@2.12.0element-ui@2.12.0安装npm install --save el-table-infinite-...
el-tree-selected-tree
11-15
在Element UI库中，`el-tree` 是一个强大的组件，用于构建可交互的树形结构数据展示。在实际开发中，我们经常需要处理用户选择的节点，并可能需要独立展示这些选中节点，甚至允许用户在独立的树结构中进行删除操作。...
el-date-picker 英文改中文.doc
11-18
https://blog.csdn.net/xuelang532777032/article/details/121287203,内有博客截图，方便没有vip的小伙伴下载
javax.el-api-3.0.0.jar
04-09
springboot 打war部署到apache-tomcat-7.0.69中启动报错：java.lang.NoClassDefFoundError: javax/el/ELManager ... 下载javax.el-api-3.0.0.jar,放到 tomcat/lib包下可以解决，原来的el-api.jar版本较低
el-radio
qq_38210427的博客
04-22 471
适用于在多个互斥的选项中选择的场景。事件来响应变化，它会传入一个参数。绑定变量，另外，还提供了。即可，无需再给每一个。
VUE之单选按钮el-radio，选择不同触发不同的事件
George_huhu的博客
03-03 1万+
VUE之单选按钮el-radio，选择不同触发不同的事件 下面展示一些 代码片。 改变选择用的是 @change 而不是 @click <el-radio-group v-model="radioCreat" @change="agreeChange"> <el-radio label="创建" border >创建</el-radio> <el-radio label="关联生成" border >关联生成</el-
el-radio-group动态显示
weixin_40444253的博客
04-07 925
el-radio-group动态显示
el-radio-group中的el-radio绑定默认值
02-29
在el-radio-group中，可以通过给el-radio设置默认值来实现绑定默认值的功能。具体的步骤如下： 1. 在el-radio-group中，使用v-model指令绑定一个数据属性，该属性用于存储选中的el-radio的值。 2. 在el-radio中，使用v-bind指令将默认值绑定到value属性上。 下面是一个示例代码： ```html <template> <div> <el-radio-group v-model="selectedValue"> <el-radio v-bind:value="1">Option 1</el-radio> <el-radio v-bind:value="2">Option 2</el-radio> <el-radio v-bind:value="3">Option 3</el-radio> </el-radio-group> </div> </template> <script> export default { data() { return { selectedValue: 2 // 默认选中Option 2 }; } }; </script> ``` 在上面的代码中，selectedValue属性被绑定到el-radio-group的v-model上，它的初始值为2，即默认选中Option 2。每个el-radio通过v-bind指令将对应的值绑定到value属性上。 这样，当页面加载时，默认选中的el-radio就会根据selectedValue的值进行渲染。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值