Radio 单选框
Radio 单选框
在一组备选项中进行单选
¶基础用法
由于选项默认可见,不宜过多,若选项过多,建议使用 Select 选择器。
要使用 Radio 组件,只需要设置v-model
绑定变量,选中意味着变量的值为相应 Radio label
属性的值,label
可以是String
、Number
或Boolean
。
<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
属性即可,它接受一个Boolean
,true
为禁用。
<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 单选框的更多相关文章
- TagHelper+Layui封装组件之Radio单选框
TagHelper+Layui封装组件之Radio单选框 标签名称:cl-radio 标签属性: asp-for:绑定的字段,必须指定 asp-items:绑定单选项 类型为:IEnumerable& ...
- 前端 HTML form表单标签 input标签 type属性 radio 单选框
<input type="radio"> 单选框 适用于 选择性别按钮网页等 <!DOCTYPE html> <html lang="en& ...
- 纯css3简单实用的checkbox复选框和radio单选框
昨天为大家分享了一款很炫的checkbox复选框和radio单选框,今天再给大家带来一款简单实用的checkbox复选框和radio单选框.界面清淅.舒服.先给大家来张效果图: 在线预览 源码下载 ...
- 纯css3实现的超炫checkbox复选框和radio单选框
之前为大家分享了好多css3实现的按钮.今天要为大家分享的是纯css3实现的checkbox复选框和radio单选框,效果超级炫.先让我们看看图吧! 在线预览 源码下载 这个实例完全由css3实现 ...
- elementUI 学习入门之 radio 单选框
Radio 单选框 基础用法 选项默认可见,选项不宜过多,选项过多建议使用 select 选择器 使用 Radio 组件,需要设置 v-model 绑定变量,选中意味着变量的值为相应 Radio l ...
- layui 获取radio单选框选中的值
Layui 获取 radio的值,layui判断radio选中的单选值 layui form 表单获取radio选中的值 首先准备两个radio <input type="radio& ...
- selenium死活定位不到元素以及radio单选框点击不生效
今天操作一个单选框浪费太多时间,现在其实很简单得东西,记录一下: 1,问题一,定位不到 如图,使用selenium IDE和xpath helper都试过,无法成功定位到这个单选框,实际上是因为,这个 ...
- JQuery radio单选框应用
转载:JQuery判断radio(单选框)是否选中和获取选中值方法总结 一.利用获取选中值判断选中 直接上代码,别忘记引用JQuery包 复制代码 代码如下: < !DOCTYPE html P ...
- jquery获取radio单选框的值
1.获取原有单选框的值 var value=$("input[name='is_setting']:checked").val(); 2.获取重选后的单选框的值 <tr> ...
随机推荐
- tensorflow源码分析
前言: 一般来说,如果安装tensorflow主要目的是为了调试些小程序的话,只要下载相应的包,然后,直接使用pip install tensorflow即可. 但有时我们需要将Tensorflow的 ...
- Dubbo 03 Restful风格的API
目录 Dubbo03 restful风格的API 根路径 协议 版本 用HTTP协议里的动词来实现资源的增删改查 用例 swagger(丝袜哥) OpenAPI 资源 编写API文档 整合Spring ...
- oracle 之创建视图异常
最近在整理的oracle 的时候发现.创建视图 例如: CREATE OR REPLACE VIEW dept_sum_vw(name,minsal,maxsal,avgsal) AS SELECT ...
- hive不分区增量更新
insert overwrite table ods.zeg_so select *,case when zsm.id is not null then cast(current_timestamp ...
- Gym - 101987G Secret Code (概率+数学积分)
题意:有A,B,C三个人要见面,每个人在[0,S]随机选择一个时间点作为见面时间,先到的那个人要等下一个人来了之后和他确认信息,然后马上就走. 例如,假如A先到,B其次,C最后到,那么A要等B到了之后 ...
- Nginx动静分离经典案例配置
随着Nginx高性能Web服务器大量被使用,目前Nginx最新稳定版为1.2.6,张宴兄在实际应用中大量使用Nginx,并分享Nginx高性能Web服务器知识,使得Nginx在国内也是飞速的发展.那今 ...
- linux命令详解之ls命令
ls命令概述 ls命令用于显示文件目录列表,和Windows系统下DOS命令dir类似.当执行ls命令时,默认显示的只有非隐藏文件的文件名.以文件名进行排序及文件名代表的颜色显示.当不加参数时,默认列 ...
- sparkStreaming(2.1.0)示范代码
package cn.piesat import org.apache.spark.SparkConfimport org.apache.spark.sql.SparkSessionimport or ...
- 微信小游戏egret开发包括p2引擎小结
用egret + p2 做一个类似投球的小游戏,坑大致如下: 1.p2引擎与egret坐标不同注意转换,横坐标没什么,纵坐标egret.y = stageHeight - body.position[ ...
- postman -- token全局变量
var data = JSON.parse(responseBody);if (data.data.token) { tests["Body has token"] = true; ...