2024年06月20日 建站教程
在Vue中，单选组件通常通过使用单选框来实现。我们可以使用v-model指令将单选按钮框的选定状态与数据属性绑定在一起。
具体代码如下：
<template>
<div>
<h3>单选组件：</h3>
<label v-for="(option, index) in options" :key="index">
<input type="radio"
:value="option.value"
v-model="selectedOption"
:id="'option-' + index"
/>
<span>{{ option.label }}</span>
</label>
<p>已选项：{{ selectedOption }}</p>
</div>
</template>
<script>
export default {
data() {
return {
options: [
{ label: "选项1", value: "value1" },
{ label: "选项2", value: "value2" },
{ label: "选项3", value: "value3" },
],
selectedOption: null,
};
},
};
</script>
本文链接：http://so.lmcjl.com/news/6926/