Radio 单选框

在一组选项中进行单选

按需引入方式

如果是完整引入可跳过此步骤

import Vue from 'vue'
import { Radio, RadioGroup } from 'element-ui'
import 'element-ui/lib/theme-chalk/base.css'
import 'element-ui/lib/theme-chalk/radio.css'
import 'element-ui/lib/theme-chalk/radio-group.css'

Vue.use(Radio)
Vue.use(RadioGroup)

基础使用

适用于选项过少的情况下，若选项过多建议使用 Select 选择器。

<template>
    <el-radio v-model="radio" label="1"> 选项 A </el-radio>
    <el-radio v-model="radio" label="2"> 选项 B </el-radio>
</template>

<script>
export default {
    data() {
        return {
            radio: '1'
        }
    }
}
</script>

禁用状态

<template>
    <el-radio disabled v-model="radio" label="1"> 选项 A </el-radio>
    <el-radio disabled v-model="radio" label="2"> 选项 B </el-radio>
</template>

<script>
export default {
    data() {
        return {
            radio: '1'
        }
    }
}
</script>

单选框组

适用于多个场景中使用

<template>
    <el-radio-group v-model="radio">
        <el-radio label="1">选项 A</el-radio>
        <el-radio label="2">选项 B</el-radio>
    </el-radio-group>
</template>

<script>
export default {
    data() {
        return {
            radio: '1'
        }
    }
}
</script>

Radio Attributes

参数	说明	类型	默认值
v-model	绑定值	string | number | boolean
label	Radio 的 value	string | number | boolean
disabled	是否禁用	boolean	false
...