首先，确保你已经安装了 Vant UI 组件库。你可以通过 npm 或 yarn 安装：
npm install vant
# 或者
yarn add vant
然后，在你的 Vue 项目中，可以这样使用 Vant Radio 组件：
<template>
<div>
<!-- 单个单选框 -->
<van-radio v-model="selectedValue" name="radio1" label="选项1">选项1</van-radio>
<!-- 多个单选框 -->
<van-radio-group v-model="selectedValue2">
<van-radio name="radio2" label="选项2">选项2</van-radio>
<van-radio name="radio3" label="选项3">选项3</van-radio>
<van-radio name="radio4" label="选项4">选项4</van-radio>
</van-radio-group>
</div>
</template>
<script>
export default {
data() {
return {
selectedValue: '选项1', // 单个单选框的绑定值
selectedValue2: '选项2', // 多个单选框的绑定值
};
},
};
</script>
<style>
/* 在这里可以添加样式 */
</style>
在这个例子中，我们使用了 <van-radio> 和 <van-radio-group> 组件。<van-radio> 用于单个单选框，通过 v-model 绑定了选中状态。<van-radio-group> 用于管理多个单选框，通过 v-model 绑定了选中的单选框的值。
请确保在你的项目中正确引入了 Vant UI 组件库，并按照文档中的方式进行配置。这只是一个简单的例子，你可以根据实际需求进一步配置和定制 Vant Radio 组件。
转载请注明出处：http://www.pingtaimeng.com/article/detail/5662/Vant