Radio 单选框

在一组备选项中进行单选。

基础用法

单选框不应该有太多的可选项， 如果你有很多的可选项你应该使用选择框而不是单选框。

要使用 Radio 组件，只需要设置v-model绑定变量， 选中意味着变量的值为相应 Radio value属性的值， value可以是String、 Number 或 Boolean。

Option 1Option 2

Option 1Option 2

Option 1Option 2

<template>
  <div class="box">
    <v-radio-group v-model="radio1">
      <v-radio value="1" size="large">Option 1</v-radio>
      <v-radio value="2" size="large">Option 2</v-radio>
    </v-radio-group>
  </div>
  <div class="box">
    <v-radio-group v-model="radio2">
      <v-radio value="1">Option 1</v-radio>
      <v-radio value="2">Option 2</v-radio>
    </v-radio-group>
  </div>
  <div class="box">
    <v-radio-group v-model="radio3">
      <v-radio value="1" size="small">Option 1</v-radio>
      <v-radio value="2" size="small">Option 2</v-radio>
    </v-radio-group>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const radio1 = ref('1');
const radio2 = ref('1');
const radio3 = ref('1');
</script>

<style scoped>
.box {
  margin-left: 16px;
  margin-bottom: 8px;
}
</style>

禁用状态

disabled 属性可以用来控制单选框的禁用状态。

你只需要为单选框设置 disabled 属性就能控制其禁用状态。

Option A Option B

<template>
  <div class="box">
    <v-radio v-model="radio" disabled value="disabled">Option A</v-radio>
    <v-radio v-model="radio" disabled value="selected and disabled">
      Option B
    </v-radio>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const radio = ref('selected and disabled');
</script>

<style scoped>
.box {
  display: flex;
  gap: 32px;
}
</style>

单选框组

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

结合 v-radio-group 元素和子元素 v-radio 可以实现单选组， 为 v-radio-group 绑定 v-model，再为 每一个 v-radio 设置好 value 属性即可。

Option AOption BOption C

<template>
  <v-radio-group v-model="radio">
    <v-radio :value="3">Option A</v-radio>
    <v-radio :value="6">Option B</v-radio>
    <v-radio :value="9">Option C</v-radio>
  </v-radio-group>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const radio = ref(3);
</script>

带有边框

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

Option AOption B

Option AOption B

Option AOption B

Option AOption B

<template>
  <div>
    <v-radio-group v-model="radio1">
      <v-radio value="1" size="large" border>Option A</v-radio>
      <v-radio value="2" size="large" border>Option B</v-radio>
    </v-radio-group>
  </div>
  <div style="margin-top: 20px">
    <v-radio-group v-model="radio2">
      <v-radio value="1" border>Option A</v-radio>
      <v-radio value="2" border>Option B</v-radio>
    </v-radio-group>
  </div>
  <div style="margin-top: 20px">
    <v-radio-group v-model="radio3">
      <v-radio value="1" border size="small">Option A</v-radio>
      <v-radio value="2" border disabled size="small">Option B</v-radio>
    </v-radio-group>
  </div>
  <div style="margin-top: 20px">
    <v-radio-group v-model="radio4">
      <v-radio value="1" border disabled size="small">Option A</v-radio>
      <v-radio value="2" border disabled size="small">Option B</v-radio>
    </v-radio-group>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const radio1 = ref('1');
const radio2 = ref('1');
const radio3 = ref('1');
const radio4 = ref('1');
</script>

Radio Attributes

属性名	说明	类型	默认值
model-value / v-model	选中项绑定值	string | number | boolean	—
value	单选框的值	string | number | boolean	—
disabled	是否禁用单选框	boolean	—
size	单选框的尺寸	'large' | 'small'	—
border	是否显示边框	boolean	false
name	原生 name 属性	string	—

Radio Events

事件名	说明	类型
change	绑定值变化时触发的事件	(value: string | number | boolean) => void

Radio Slots

插槽名	说明
default	默认内容 / 单选框文本内容

RadioGroup Attributes

属性名	说明	类型	默认值
model-value / v-model	选中项绑定值	string | number | boolean	—
size	单选框按钮的大小	'large' | 'small'	—
border	是否显示边框	boolean	false
disabled	是否禁用	boolean	false

RadioGroup Events

事件名	说明	类型
change	绑定值变化时触发的事件	(value: string | number | boolean) => void

RadioGroup Slots

插槽名	说明	子标签
default	自定义默认内容	Radio