vue实现图片单选
Vue 实现图片单选功能
在 Vue 中实现图片单选功能可以通过多种方式完成，以下是两种常见的实现方法：
方法一：使用 v-model 和单选按钮
通过将单选按钮与图片绑定，利用 v-model 管理选中状态。
<template>
<div>
<div v-for="(image, index) in images" :key="index" class="image-option">
<input
type="radio"
:id="'image-' + index"
:value="image.id"
v-model="selectedImage"
/>
<label :for="'image-' + index">
<img :src="image.url" :alt="image.alt" />
</label>
</div>
</div>
</template>
<script>
export default {
data() {
return {
images: [
{ id: 1, url: 'image1.jpg', alt: 'Image 1' },
{ id: 2, url: 'image2.jpg', alt: 'Image 2' },
{ id: 3, url: 'image3.jpg', alt: 'Image 3' },
],
selectedImage: null,
};
},
};
</script>
<style>
.image-option {
display: inline-block;
margin: 10px;
}
.image-option input[type='radio'] {
display: none;
}
.image-option img {
cursor: pointer;
border: 2px solid transparent;
}
.image-option input[type='radio']:checked + label img {
border-color: #42b983;
}
</style>方法二：纯点击事件实现
通过点击事件直接切换选中状态，无需使用单选按钮。
<template>
<div>
<div
v-for="(image, index) in images"
:key="index"
@click="selectImage(image.id)"
class="image-option"
>
<img
:src="image.url"
:alt="image.alt"
:class="{ selected: selectedImage === image.id }"
/>
</div>
</div>
</template>
<script>
export default {
data() {
return {
images: [
{ id: 1, url: 'image1.jpg', alt: 'Image 1' },
{ id: 2, url: 'image2.jpg', alt: 'Image 2' },
{ id: 3, url: 'image3.jpg', alt: 'Image 3' },
],
selectedImage: null,
};
},
methods: {
selectImage(id) {
this.selectedImage = id;
},
},
};
</script>
<style>
.image-option {
display: inline-block;
margin: 10px;
cursor: pointer;
}
.image-option img {
border: 2px solid transparent;
}
.image-option img.selected {
border-color: #42b983;
}
</style>关键点说明
- 数据绑定：使用
v-model或手动管理选中状态。 - 样式处理：通过 CSS 高亮显示选中的图片。
- 交互优化：隐藏原生单选按钮，通过图片点击触发选择。
两种方法均可实现图片单选功能，根据项目需求选择合适的方式。
