首先，确保你已经安装了Vant3组件库。你可以使用npm或者yarn进行安装：
npm install vant@next
# 或者
yarn add vant@next
然后，在你的Vue组件中引入并注册Radio组件：
<template>
<div>
<van-radio-group v-model="selectedValue">
<van-radio name="radio1" label="Option 1">选项1</van-radio>
<van-radio name="radio2" label="Option 2">选项2</van-radio>
<van-radio name="radio3" label="Option 3">选项3</van-radio>
</van-radio-group>
<p>选中的值: {{ selectedValue }}</p>
</div>
</template>
<script>
import { ref } from 'vue';
import { Radio, RadioGroup } from 'vant';
export default {
components: {
[Radio.name]: Radio,
[RadioGroup.name]: RadioGroup,
},
setup() {
const selectedValue = ref('radio1');
return {
selectedValue,
};
},
};
</script>
在上述例子中，我们使用Vue 3的ref函数创建一个响应式的selectedValue变量，用于存储选中的单选框的值。然后，我们在模板中使用<van-radio-group>标签引入了Vant3的RadioGroup组件，并通过v-model将selectedValue与单选框的值进行绑定。在<van-radio>标签中，我们使用name属性标识不同的单选框，使用label属性设置每个选项的值。
通过上述设置，用户选择不同的单选框时，selectedValue变量会自动更新，从而反映出用户的选择。
请确保你的项目已正确配置Vant3，并根据你的实际需求调整代码。
转载请注明出处：http://www.zyzy.cn/article/detail/5726/Vant