AntDesign Vue Radio 单选框

案例：基本用法

<script setup>
import {ref} from "vue";

const value = ref(false)
</script>
<template>
  <div class="p-8 bg-indigo-50 text-center">
    <a-radio
        v-model:checked="value"
        class="w-96"
    >
      同意协议
    </a-radio>
  </div>
</template>

案例：单选按钮组实现tab切换效果

<script setup>
import {ref} from "vue";

const value = ref("")
</script>
<template>
  <div class="p-8 bg-red-300 text-center">
    <a-radio-group v-model:value="value">
      <a-radio-button value="Python">Python</a-radio-button>
      <a-radio-button value="Golang">Golang</a-radio-button>
      <a-radio-button value="JavaScript">JavaScript</a-radio-button>
      <a-radio-button value="Vue">Vue</a-radio-button>
    </a-radio-group>
    <a-divider/>
    {{ value }}
  </div>
</template>

案例：垂直单选按钮组实现选择题效果

<script setup>
import {ref} from "vue";

const value = ref("")
</script>
<template>
  <div class="p-8 bg-red-300 text-center">
    <h1>你最喜欢的编程语言是？</h1>
    <a-radio-group v-model:value="value" class="flex flex-col w-48 mx-auto">
      <a-radio value="Python">Python</a-radio>
      <a-radio value="Golang">Golang</a-radio>
      <a-radio value="JavaScript">JavaScript</a-radio>
      <a-radio value="Vue">Vue</a-radio>
    </a-radio-group>
    <a-divider/>
    {{ value }}
  </div>
</template>