关于前端:Elementui-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