vue选择框切换不同图片

可以使用Vue的事件绑定和计算属性来实现选择框切换不同图片的功能。

首先，在模板中定义一个选择框和一个图片展示区域：

<template>
  <div>
    <select v-model="selectedOption">
      <option v-for="(option, index) in options" :key="index" :value="option.value">{{ option.label }}</option>
    </select>
    <img :src="selectedImage" alt="">
  </div>
</template>

其中，`options` 是一个数组，每个元素包含一个 label 和一个 value 属性，用于显示在选择框中。`selectedOption` 是一个双向绑定的变量，用于表示当前选中的选项的值。`selectedImage` 是一个计算属性，根据选中的选项的值来动态设置图片的路径。

接下来，在 Vue 实例中定义 `options` 和 `selectedOption` 变量，并在 `computed` 中定义 `selectedImage` 计算属性：

<script>
export default {
  data() {
    return {
      options: [
        { label: '选项1', value: 'image1.png' },
        { label: '选项2', value: 'image2.png' },
        { label: '选项3', value: 'image3.png' },
      ],
      selectedOption: 'image1.png',
    };
  },
  computed: {
    selectedImage() {
      return `images/${this.selectedOption}`;
    },
  },
};
</script>

在 `selectedImage` 计算属性中，使用模板字符串拼接出图片路径，其中 `${this.selectedOption}` 表示当前选中的选项的值。

这样，当用户选择不同的选项时，图片展示区域的内容就会动态更新，显示对应的图片。