vue 实现单选功能
Vue 实现单选功能的方法
使用 v-model 绑定单选按钮
在 Vue 中，可以通过 v-model 绑定单选按钮的值，实现单选功能。以下是一个简单的示例：
<template>
<div>
<label>
<input type="radio" v-model="selectedOption" value="option1" />
Option 1
</label>
<label>
<input type="radio" v-model="selectedOption" value="option2" />
Option 2
</label>
<label>
<input type="radio" v-model="selectedOption" value="option3" />
Option 3
</label>
<p>Selected option: {{ selectedOption }}</p>
</div>
</template>
<script>
export default {
data() {
return {
selectedOption: '',
};
},
};
</script>动态生成单选按钮
如果需要动态生成单选按钮，可以使用 v-for 遍历选项数组：
<template>
<div>
<label v-for="option in options" :key="option.value">
<input type="radio" v-model="selectedOption" :value="option.value" />
{{ option.label }}
</label>
<p>Selected option: {{ selectedOption }}</p>
</div>
</template>
<script>
export default {
data() {
return {
selectedOption: '',
options: [
{ value: 'option1', label: 'Option 1' },
{ value: 'option2', label: 'Option 2' },
{ value: 'option3', label: 'Option 3' },
],
};
},
};
</script>使用组件封装单选功能
如果需要复用单选功能，可以封装一个自定义组件：
<template>
<div>
<label v-for="option in options" :key="option.value">
<input
type="radio"
:value="option.value"
:checked="option.value === modelValue"
@change="$emit('update:modelValue', option.value)"
/>
{{ option.label }}
</label>
</div>
</template>
<script>
export default {
props: {
options: {
type: Array,
required: true,
},
modelValue: {
type: String,
required: true,
},
},
emits: ['update:modelValue'],
};
</script>使用该组件时，可以通过 v-model 绑定值：
<template>
<div>
<RadioGroup v-model="selectedOption" :options="options" />
<p>Selected option: {{ selectedOption }}</p>
</div>
</template>
<script>
import RadioGroup from './RadioGroup.vue';
export default {
components: {
RadioGroup,
},
data() {
return {
selectedOption: '',
options: [
{ value: 'option1', label: 'Option 1' },
{ value: 'option2', label: 'Option 2' },
{ value: 'option3', label: 'Option 3' },
],
};
},
};
</script>注意事项
- 确保每个单选按钮的
value属性唯一，避免冲突。 - 使用
v-model时，绑定的数据需要初始化为空字符串或默认值。 - 动态生成单选按钮时，为每个选项添加唯一的
key属性以提高性能。
