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

这篇具有很好参考价值的文章主要介绍了vue3 antd项目实战——radiogroup单选组合、radiobutton单选按钮【v-model双向绑定数据、v-for循环输出options选择项】。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

知识调用

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

vue3 antd项目实战——radiogroup单选组合、radiobutton单选按钮【v-model双向绑定数据、v-for循环输出options选择项】,ant design vue,Vue,vue.js,javascript,前端,anti-design-vue,typescript

场景复现

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

核心内容

🔥🔥 更多具体内容见Ant Design Vue官方文档
vue3 antd项目实战——radiogroup单选组合、radiobutton单选按钮【v-model双向绑定数据、v-for循环输出options选择项】,ant design vue,Vue,vue.js,javascript,前端,anti-design-vue,typescript
何时使用：

用在多个备选项中选择单个状态
和Select地区别是，Radio所有选项默认可见，方便用户比较选择，因此选项不宜过多

可以看到在select组件中，已经明确说明，当选项少于5项时，使用Radio单选框时最好的选择。

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

准备工作

一定要注意，任何时候使用组件，都要记得先注册、再使用
注册部分如下图：👇👇👇
vue3 antd项目实战——radiogroup单选组合、radiobutton单选按钮【v-model双向绑定数据、v-for循环输出options选择项】,ant design vue,Vue,vue.js,javascript,前端,anti-design-vue,typescript
注册代码（模板）：

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>
</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选择项】,ant design vue,Vue,vue.js,javascript,前端,anti-design-vue,typescript

更改选项内容直接在标签内中更改即可。
vue3 antd项目实战——radiogroup单选组合、radiobutton单选按钮【v-model双向绑定数据、v-for循环输出options选择项】,ant design vue,Vue,vue.js,javascript,前端,anti-design-vue,typescript

常见用法

单选组合 a-radio-group

<template>
  <a-radio-group v-model:value="value" name="radioGroup">
    <a-radio value="1">A</a-radio>
    <a-radio value="2">B</a-radio>
    <a-radio value="3">C</a-radio>
    <a-radio value="4">D</a-radio>
  </a-radio-group>
</template>
<script lang="ts" setup>
import { defineComponent, ref } from 'vue';

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

建议使用单选组合时，带上相应的name属性

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

1.普通的按钮单选组合

<template>
  <div>
     <a-radio-group v-model:value="value1">
       <a-radio-button value="a">Hangzhou</a-radio-button>
       <a-radio-button value="b">Shanghai</a-radio-button>
       <a-radio-button value="c">Beijing</a-radio-button>
       <a-radio-button value="d">Chengdu</a-radio-button>
     </a-radio-group>
  </div>
</template>
<script lang="ts"setup>
import { defineComponent, ref } from 'vue';

const value1 = ref<string>('a'); // 初始选项为HangZhou
</script>

2.填底的按钮单选组合
通过button-style属性，添加solid填底样式
vue3 antd项目实战——radiogroup单选组合、radiobutton单选按钮【v-model双向绑定数据、v-for循环输出options选择项】,ant design vue,Vue,vue.js,javascript,前端,anti-design-vue,typescript

<template>
  <div>
     <a-radio-group v-model:value="value1" button-style="solid">
       <a-radio-button value="a">Hangzhou</a-radio-button>
       <a-radio-button value="b">Shanghai</a-radio-button>
       <a-radio-button value="c">Beijing</a-radio-button>
       <a-radio-button value="d">Chengdu</a-radio-button>
     </a-radio-group>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';

const value1 = ref<string>('a'); // 初始选项为HangZhou
</script>

垂直单选组合 radioStyle

通过:style属性绑定自定义样式

<template>
  <a-radio-group v-model:value="value">
    <a-radio :style="radioStyle" :value="1">Option A</a-radio>
    <a-radio :style="radioStyle" :value="2">Option B</a-radio>
    <a-radio :style="radioStyle" :value="3">Option C</a-radio>
  </a-radio-group>
</template>
<script lang="ts" setup>
import { defineComponent, reactive, ref } from 'vue';

const value = ref<number>(1);
const radioStyle = reactive({
  display: 'flex', // 设置垂直平铺
  height: '30px', // 设置各选项的高度
  lineHeight: '30px', // 设置每行之间的高度
});
</script>

常用属性

特别是option属性，可以进行数据的动态绑定，减少html部分的代码量，更好的实现代码结构功能化。

实例—— 双向绑定单选框的值，循环输出选项

html部分:

<a-radio-group 
   v-model:value="formState.certificates_seal_select" 
   name="sealRadioGroup"
   >
   <a-radio 
      v-for="item of sealOptionsValue" 
      v-model:value="item.options" 
      :key="item.id"
      >{{ item.options }}
   </a-radio>
</a-radio-group>

script部分:

// 证书模板选择项
const formworkOptionsValue = ref<optionsType[]>([
    {"id":1,"options":"五分钟讲堂录取通知书"},
    {"id":2,"options":"五分钟讲堂转正证书"},
    {"id":3,"options":"五分钟讲堂培训证书"},
    {"id":4,"options":"五分钟讲堂退休证书"},
],)

实现效果：
vue3 antd项目实战——radiogroup单选组合、radiobutton单选按钮【v-model双向绑定数据、v-for循环输出options选择项】,ant design vue,Vue,vue.js,javascript,前端,anti-design-vue,typescript 文章来源地址https://www.toymoban.com/news/detail-594705.html

关于Ant Deign Vue组件库的知识点和用法有很多，后期会不定期更新。 感兴趣的小伙伴可以订阅本专栏，方便后续了解学习。 觉得这篇文章有用的小伙伴们可以点赞➕收藏➕关注哦~

到了这里，关于vue3 antd项目实战——radiogroup单选组合、radiobutton单选按钮【v-model双向绑定数据、v-for循环输出options选择项】的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！