vue3 antd项目实战——radiogroup单选组合、radiobutton单选按钮【v-model双向绑定数据、v-for循环输出options选择项】

知识调用

🔥🔥更多内容见Ant Design Vue官方文档
🔥🔥 vue3+ant design vue+ts实战【ant-design-vue组件库引入】
🔥vue3【列表渲染】v-for 详细介绍（vue中的“循环”）

场景复现

最近在项目开发中需要使用到ant design vue组件库的单选框（Radio）组件。所以本期文章会详细地教大家如何使用Radio单选框。

核心内容

🔥🔥 更多具体内容见Ant Design Vue官方文档

何时使用：

• 用在多个备选项中选择单个状态
• 和Select地区别是，Radio所有选项默认可见，方便用户比较选择，因此选项不宜过多
  
  可以看到在select组件中，已经明确说明，当选项少于5项时，使用Radio单选框时最好的选择。

---

下面是实际的代码演示和效果展示

准备工作

一定要注意，任何时候使用组件，都要记得先注册、再使用
注册部分如下图：👇👇👇

注册代码（模板）：

import {
    createApp } from 'vue'
import App from './App.vue'
import {
   
    Button, message, Form, Input, Checkbox, Menu, Layout,
    Breadcrumb, Tag, Table, Select, DatePicker, Spin, Switch,
    ConfigProvider,
    Card, Popconfirm, Badge,
    FormItem, Radio, Transfer,PageHeader,Modal,Image,Tabs
} from 'ant-design-vue';

const app = createApp(App)

app.use(router).use(Button).use(Form).use(Breadcrumb).use(Tag)
    .use(ConfigProvider).use(Switch).use(Popconfirm).use(Badge).use(Card).use(DatePicker)
    .use(Transfer).use(Modal).use(Radio).use(PageHeader).use(Image).use(Tabs).use(Spin)
    .use(Input).use(Checkbox).use(Menu).use(Layout).use(Table).use(Select)
    .mount('#app');
app.config.globalProperties.$message = message;

这些基本上涵盖了ant desgin vue组件库内的所有常用组件，建议是一次性注册完。

基本用法

<template>
  <a-radio v-model:checked="checked">Radio</a-radio>