首先，确保你已经安装了 Vant4：
npm install vant@next
然后，在你的 Vue 组件中引入 van-radio：
<template>
<div>
<van-radio v-model="selectedValue" shape="square">选项1</van-radio>
<van-radio v-model="selectedValue" shape="square">选项2</van-radio>
<van-radio v-model="selectedValue" shape="square">选项3</van-radio>
</div>
</template>
<script>
import { ref } from 'vue';
import { Radio } from 'vant';
import 'vant/lib/index.css'; // 引入样式
export default {
components: {
[Radio.name]: Radio,
},
setup() {
const selectedValue = ref('');
return {
selectedValue,
};
},
};
</script>
在上面的例子中，我们使用了 van-radio 组件，并通过 v-model 指令将单选框的值与一个 Vue 变量 selectedValue 进行双向绑定。
每个 van-radio 组件表示一个单选框，通过设置 shape 属性可以调整单选框的形状，这里设置为 "square" 表示方形。
你可以根据需要添加更多的单选框，它们共享相同的 v-model，所以只能选择其中一个。
最后，别忘了引入样式文件，这样样式才能正确应用。
转载请注明出处：http://www.pingtaimeng.com/article/detail/5810/Vant