vue.js用图片实现多选

<template>
  <div>
    <div v-for="(image, index) in images" :key="index" class="image-container">
      <img
        :src="image.src"
        :alt="image.alt"
        @click="toggleSelection(index)"
        :class="{ selected: isSelected(index) }"
      />
    </div>
    <button @click="submitSelection">提交选择</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      images: [
        { src: 'image1.jpg', alt: 'Image 1' },
        { src: 'image2.jpg', alt: 'Image 2' },
        { src: 'image3.jpg', alt: 'Image 3' }
      ],
      selectedIndexes: []
    };
  },
  methods: {
    toggleSelection(index) {
      const idx = this.selectedIndexes.indexOf(index);
      if (idx > -1) {
        this.selectedIndexes.splice(idx, 1);
      } else {
        this.selectedIndexes.push(index);
      }
    },
    isSelected(index) {
      return this.selectedIndexes.includes(index);
    },
    submitSelection() {
      console.log('Selected images:', this.selectedIndexes);
      // 这里可以添加提交选择的逻辑，例如发送请求到服务器
    }
  }
};
</script>

<style>
.image-container img {
  width: 100px;
  height: 100px;
  cursor: pointer;
}
.selected {
  border: 2px solid blue;
}
</style>