当前位置：首页 > VUE

vue 实现图片单选

2026-01-16 01:57:14VUE

vue 实现图片单选

Vue 实现图片单选功能

在 Vue 中实现图片单选功能，可以通过结合 v-model 和自定义事件来实现。以下是具体实现方法：

方法一：使用 `v-model` 和计算属性

创建一个 Vue 组件，包含一组图片和一个选中的值。
使用 v-model 绑定选中的图片 ID。
通过计算属性或方法处理选中状态。

<template>
  <div>
    <div 
      v-for="image in images" 
      :key="image.id"
      @click="selectedImage = image.id"
      :class="{ 'selected': selectedImage === image.id }"
    >
      <img :src="image.url" :alt="image.name">
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      images: [
        { id: 1, url: 'image1.jpg', name: 'Image 1' },
        { id: 2, url: 'image2.jpg', name: 'Image 2' },
        { id: 3, url: 'image3.jpg', name: 'Image 3' }
      ],
      selectedImage: null
    };
  }
};
</script>

<style>
.selected {
  border: 2px solid blue;
}
</style>

方法二：使用自定义组件

创建一个可复用的图片单选组件。
通过 props 接收图片列表和默认选中值。
使用 $emit 触发选中事件。

<template>
  <div>
    <div 
      v-for="image in images" 
      :key="image.id"
      @click="$emit('update:modelValue', image.id)"
      :class="{ 'selected': modelValue === image.id }"
    >
      <img :src="image.url" :alt="image.name">
    </div>
  </div>
</template>

<script>
export default {
  props: {
    images: {
      type: Array,
      required: true
    },
    modelValue: {
      type: [String, Number],
      default: null
    }
  },
  emits: ['update:modelValue']
};
</script>

方法三：使用 Vuex 或 Pinia 管理状态

在状态管理库中定义选中图片的状态。
在组件中通过 mapState 或 useStore 获取和更新状态。

// store.js
import { createStore } from 'vuex';

export default createStore({
  state: {
    selectedImage: null
  },
  mutations: {
    setSelectedImage(state, imageId) {
      state.selectedImage = imageId;
    }
  }
});

<template>
  <div>
    <div 
      v-for="image in images" 
      :key="image.id"
      @click="$store.commit('setSelectedImage', image.id)"
      :class="{ 'selected': $store.state.selectedImage === image.id }"
    >
      <img :src="image.url" :alt="image.name">
    </div>
  </div>
</template>

方法四：使用 Composition API

在 Vue 3 中使用 ref 或 reactive 管理选中状态。
通过 setup 函数返回响应式数据和方法。

<template>
  <div>
    <div 
      v-for="image in images" 
      :key="image.id"
      @click="selectImage(image.id)"
      :class="{ 'selected': selectedImage === image.id }"
    >
      <img :src="image.url" :alt="image.name">
    </div>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const images = [
      { id: 1, url: 'image1.jpg', name: 'Image 1' },
      { id: 2, url: 'image2.jpg', name: 'Image 2' },
      { id: 3, url: 'image3.jpg', name: 'Image 3' }
    ];
    const selectedImage = ref(null);

    const selectImage = (imageId) => {
      selectedImage.value = imageId;
    };

    return {
      images,
      selectedImage,
      selectImage
    };
  }
};
</script>