当前位置：首页 > VUE

vue实现图片单选

2026-01-14 08:19:30VUE

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>