Radio 单选框

在一组备选项中进行单选

基础用法

由于选项默认可见,不宜过多,若选项过多,建议使用 Select 选择器。

要使用 Radio 组件,只需要设置v-model绑定变量,选中意味着变量的值为相应 Radio label属性的值,label可以是StringNumberBoolean

<template>
<el-radio v-model="radio" label="1">备选项</el-radio>
<el-radio v-model="radio" label="2">备选项</el-radio>
</template> <script>
export default {
data () {
return {
radio: '1'
};
}
}
</script>
 

禁用状态

单选框不可用的状态。

只要在el-radio元素中设置disabled属性即可,它接受一个Booleantrue为禁用。

<template>
<el-radio disabled v-model="radio1" label="禁用">备选项</el-radio>
<el-radio disabled v-model="radio1" label="选中且禁用">备选项</el-radio>
</template> <script>
export default {
data () {
return {
radio1: '选中且禁用'
};
}
}
</script>
 

单选框组

适用于在多个互斥的选项中选择的场景

结合el-radio-group元素和子元素el-radio可以实现单选组,在el-radio-group中绑定v-model,在el-radio中设置好label即可,无需再给每一个el-radio绑定变量,另外,还提供了change事件来响应变化,它会传入一个参数value

<template>
<el-radio-group v-model="radio2">
<el-radio :label="3">备选项</el-radio>
<el-radio :label="6">备选项</el-radio>
<el-radio :label="9">备选项</el-radio>
</el-radio-group>
</template> <script>
export default {
data () {
return {
radio2: 3
};
}
}
</script>
 

按钮样式

按钮样式的单选组合。

只需要把el-radio元素换成el-radio-button元素即可,此外,Element 还提供了size属性。

<template>
<div>
<el-radio-group v-model="radio3">
<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="radio4" 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="radio5" 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="radio6" 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>
</template> <script>
export default {
data () {
return {
radio3: '上海',
radio4: '上海',
radio5: '上海',
radio6: '上海'
};
}
}
</script>
 

带有边框

设置border属性可以渲染为带有边框的单选框。

<template>
<div>
<el-radio v-model="radio7" label="1" border>备选项1</el-radio>
<el-radio v-model="radio7" label="2" border>备选项2</el-radio>
</div>
<div style="margin-top: 20px">
<el-radio v-model="radio8" label="1" border size="medium">备选项1</el-radio>
<el-radio v-model="radio8" label="2" border size="medium">备选项2</el-radio>
</div>
<div style="margin-top: 20px">
<el-radio-group v-model="radio9" 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="radio10" size="mini" disabled>
<el-radio label="1" border>备选项1</el-radio>
<el-radio label="2" border>备选项2</el-radio>
</el-radio-group>
</div>
</template> <script>
export default {
data () {
return {
radio7: '1',
radio8: '1',
radio9: '1',
radio10: '1'
};
}
}
</script>
 

Radio Attributes

参数 说明 类型 可选值 默认值
label Radio 的 value string / number / boolean
disabled 是否禁用 boolean false
border 是否显示边框 boolean false
size Radio 的尺寸,仅在 border 为真时有效 string medium / small / mini
name 原生 name 属性 string

Radio Events

事件名称 说明 回调参数
change 绑定值变化时触发的事件 选中的 Radio label 值

Radio-group Attributes

参数 说明 类型 可选值 默认值
size 单选框组尺寸,仅对按钮形式的 Radio 或带有边框的 Radio 有效 string medium / small / mini
disabled 是否禁用 boolean false
text-color 按钮形式的 Radio 激活时的文本颜色 string #ffffff
fill 按钮形式的 Radio 激活时的填充色和边框色 string #409EFF

Radio-group Events

事件名称 说明 回调参数
change 绑定值变化时触发的事件 选中的 Radio label 值

Radio-button Attributes

参数 说明 类型 可选值 默认值
label Radio 的 value string / number
disabled 是否禁用 boolean false
name 原生 name 属性 string

Radio 单选框的更多相关文章

  1. TagHelper+Layui封装组件之Radio单选框

    TagHelper+Layui封装组件之Radio单选框 标签名称:cl-radio 标签属性: asp-for:绑定的字段,必须指定 asp-items:绑定单选项 类型为:IEnumerable& ...

  2. 前端 HTML form表单标签 input标签 type属性 radio 单选框

    <input type="radio"> 单选框 适用于 选择性别按钮网页等 <!DOCTYPE html> <html lang="en& ...

  3. 纯css3简单实用的checkbox复选框和radio单选框

    昨天为大家分享了一款很炫的checkbox复选框和radio单选框,今天再给大家带来一款简单实用的checkbox复选框和radio单选框.界面清淅.舒服.先给大家来张效果图: 在线预览   源码下载 ...

  4. 纯css3实现的超炫checkbox复选框和radio单选框

    之前为大家分享了好多css3实现的按钮.今天要为大家分享的是纯css3实现的checkbox复选框和radio单选框,效果超级炫.先让我们看看图吧! 在线预览   源码下载 这个实例完全由css3实现 ...

  5. elementUI 学习入门之 radio 单选框

    Radio 单选框 基础用法 选项默认可见,选项不宜过多,选项过多建议使用 select 选择器 使用 Radio 组件,需要设置 v-model 绑定变量,选中意味着变量的值为相应 Radio  l ...

  6. layui 获取radio单选框选中的值

    Layui 获取 radio的值,layui判断radio选中的单选值 layui form 表单获取radio选中的值 首先准备两个radio <input type="radio& ...

  7. selenium死活定位不到元素以及radio单选框点击不生效

    今天操作一个单选框浪费太多时间,现在其实很简单得东西,记录一下: 1,问题一,定位不到 如图,使用selenium IDE和xpath helper都试过,无法成功定位到这个单选框,实际上是因为,这个 ...

  8. JQuery radio单选框应用

    转载:JQuery判断radio(单选框)是否选中和获取选中值方法总结 一.利用获取选中值判断选中 直接上代码,别忘记引用JQuery包 复制代码 代码如下: < !DOCTYPE html P ...

  9. jquery获取radio单选框的值

    1.获取原有单选框的值 var value=$("input[name='is_setting']:checked").val(); 2.获取重选后的单选框的值 <tr> ...

随机推荐

  1. dedecms 后台栏目全部展开 包括三级栏目

    include/typeunit.class.admin.php 搜索以下代码并删除 style='display:none'

  2. dedecms 缩略图路径修改

  3. Centos的yum源更换为阿里云源

    1.备份 # mv /etc/yum.repos.d/CentOS-Base.repo # /etc/yum.repos.d/CentOS-Base.repo.backup 2.下载新的CentOS- ...

  4. 忘记mysql或mariadb数据库密码的解决方案

    主机环境 主机系统:

  5. OSM全球地图MBTiles,非postgresql方式。

    介绍: https://www.cnblogs.com/i-gps/p/3919475.html 下载和使用: https://openmaptiles.org/ OSM pbf转换: https:/ ...

  6. feign请求远程接口时报Caused by: java.net.UnknownHostException

    报错全文如下 feign.RetryableException: host10.local executing POST http://TIBMAS2-WEBAPI/tibmas2-webapi/ap ...

  7. mysql绿色版的应用

    一.首先下载mysql 1.进入 https://www.oracle.com/index.html 网址 2.拉倒页面的最下面 3. 4.把下好的压缩文件解压出来 二.在DOS命令里面配置 1.先进 ...

  8. Tarjan求点双连通分量

    概述 在一个无向图中,若任意两点间至少存在两条“点不重复”的路径,则说这个图是点双连通的(简称双连通,biconnected) 在一个无向图中,点双连通的极大子图称为点双连通分量(简称双连通分量,Bi ...

  9. LightOJ-1027-A Dangerous Maze(概率)

    链接: https://vjudge.net/problem/LightOJ-1027#author=634579757 题意: You are in a maze; seeing n doors i ...

  10. WTL自定义控件:SubclassWindow的实现

    自定义了一个edit类如下: class CCheckEditEx : public CWindowImpl< CCheckEditEx, CEdit > 其SubclassWindow函 ...