Element-ui Radio 单选框

Element-ui Radio 单选框

原文链接：https://note.noxussj.top/?source=sifo

在一组选项中进行单选

---

按需引入方式

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

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

---

原文链接：https://note.noxussj.top/?source=sifo