vue 实现列表单选
实现列表单选的方法
在Vue中实现列表单选功能，可以通过多种方式完成。以下是几种常见的方法：
使用v-model和v-for
通过v-model绑定选中的值，结合v-for渲染列表项，实现单选效果。
<template>
<div>
<div v-for="item in items" :key="item.id">
<input
type="radio"
:id="item.id"
:value="item.value"
v-model="selectedItem"
>
<label :for="item.id">{{ item.label }}</label>
</div>
</div>
</template>
<script>
export default {
data() {
return {
selectedItem: '',
items: [
{ id: '1', value: 'option1', label: 'Option 1' },
{ id: '2', value: 'option2', label: 'Option 2' },
{ id: '3', value: 'option3', label: 'Option 3' }
]
}
}
}
</script>使用计算属性和点击事件
通过计算属性和点击事件手动管理选中状态，适用于更复杂的场景。
<template>
<div>
<div
v-for="item in items"
:key="item.id"
@click="selectItem(item)"
:class="{ 'active': selectedItem === item }"
>
{{ item.label }}
</div>
</div>
</template>
<script>
export default {
data() {
return {
selectedItem: null,
items: [
{ id: '1', label: 'Option 1' },
{ id: '2', label: 'Option 2' },
{ id: '3', label: 'Option 3' }
]
}
},
methods: {
selectItem(item) {
this.selectedItem = item
}
}
}
</script>
<style>
.active {
background-color: #f0f0f0;
}
</style>使用第三方组件库
对于更复杂的需求，可以使用第三方UI组件库如Element UI或Vuetify提供的单选组件。
<template>
<el-radio-group v-model="selectedItem">
<el-radio
v-for="item in items"
:key="item.id"
:label="item.value"
>
{{ item.label }}
</el-radio>
</el-radio-group>
</template>
<script>
export default {
data() {
return {
selectedItem: '',
items: [
{ id: '1', value: 'option1', label: 'Option 1' },
{ id: '2', value: 'option2', label: 'Option 2' },
{ id: '3', value: 'option3', label: 'Option 3' }
]
}
}
}
</script>注意事项
确保为每个单选按钮设置唯一的key值，避免渲染问题。
在v-model绑定的情况下，初始值应与选项中的value类型一致，否则可能导致绑定失效。
对于自定义样式的单选效果，可以通过CSS控制选中状态的样式，增强用户体验。
