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

Ant Design vue组件库——单选框(Radio)的使用

  • 知识调用
  • 场景复现
  • 核心内容
    • 准备工作
    • 基本用法
    • 常见用法
      • 单选组合 a-radio-group
      • 按钮样式的单选组合 a-radio-button
      • 垂直单选组合 radioStyle
      • 更多输入框选项
    • 常用属性

知识调用

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

在这里插入图片描述

场景复现

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

核心内容

更多具体内容见Ant Design Vue官方文档
vue3 antd项目实战——radiogroup单选组合、radiobutton单选按钮【v-model双向绑定数据、v-for循环输出options选择项】_第1张图片
何时使用

  • 用在多个备选项中选择单个状态
  • 和Select地区别是,Radio所有选项默认可见,方便用户比较选择,因此选项不宜过多
    vue3 antd项目实战——radiogroup单选组合、radiobutton单选按钮【v-model双向绑定数据、v-for循环输出options选择项】_第2张图片
    可以看到在select组件中,已经明确说明,当选项少于5项时,使用Radio单选框时最好的选择

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

准备工作

一定要注意,任何时候使用组件,都要记得先注册、再使用
注册部分如下图:
vue3 antd项目实战——radiogroup单选组合、radiobutton单选按钮【v-model双向绑定数据、v-for循环输出options选择项】_第3张图片
注册代码(模板)

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">Radioa-radio>
template>
<script lang="ts" setup>
import { defineComponent, ref } from 'vue';

const checked = ref<boolean>(false);
script>

v-model双向绑定初始选择状态;在script中定义初始选择状态为false即关闭。
在这里插入图片描述

更改选项内容直接在标签内中更改即可。
在这里插入图片描述
vue3 antd项目实战——radiogroup单选组合、radiobutton单选按钮【v-model双向绑定数据、v-for循环输出options选择项】_第4张图片

常见用法

单选组合 a-radio-group

<template>
  <a-radio-group v-model:value="value" name="radioGroup">
    <a-radio value="1">Aa-radio>
    <a-radio value="2">Ba-radio>
    <a-radio value="3">Ca-radio>
    <a-radio value="4">Da-radio>
  a-radio-group>
template>
<script lang="ts" setup>
import { defineComponent, ref } from 'vue';

const value = ref<string>('1'); // 通过v-model:value双向绑定 设置初始选项为选项1
script>

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

建议使用单选组合时,带上相应的name属性
vue3 antd项目实战——radiogroup单选组合、radiobutton单选按钮【v-model双向绑定数据、v-for循环输出options选择项】_第6张图片

按钮样式的单选组合 a-radio-button

1.普通的按钮单选组合

<template>
  <div>
     <a-radio-group v-model:value="value1">
       <a-radio-button value="a">Hangzhoua-radio-button>
       <a-radio-button value="b">Shanghaia-radio-button>
       <a-radio-button value="c">Beijinga-radio-button>
       <a-radio-button value="d">Chengdua-radio-button>
     a-radio-group>
  div>
template>

                    
                    

你可能感兴趣的:(ant,design,vue,Vue,vue.js,javascript,前端,anti-design-vue,typescript)