使用vue写一个商品页左侧图片切换

好的，以下是一个简单的例子：

<template>
  <div class="product-page">
    <div class="left-container">
      <div class="image-container">
        <img :src="currentImage" alt="Product Image" />
      </div>
      <div class="thumbnail-container">
        <div
          v-for="(image, index) in images"
          :key="index"
          class="thumbnail"
          :class="{ active: index === activeIndex }"
          @click="activeIndex = index"
        >
          <img :src="image" alt="Thumbnail Image" />
        </div>
      </div>
    </div>
    <div class="right-container">
      <!-- Product information -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      images: [
        'https://example.com/image1.jpg',
        'https://example.com/image2.jpg',
        'https://example.com/image3.jpg',
      ],
      activeIndex: 0,
    };
  },
  computed: {
    currentImage() {
      return this.images[this.activeIndex];
    },
  },
};
</script>

<style>
.product-page {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.left-container {
  width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.image-container {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
}

.image-container img {
  max-width: 100%;
}

.thumbnail-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.thumbnail {
  margin-right: 10px;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.3s ease;
}

.thumbnail.active {
  opacity: 1;
}
</style>

这个例子中，我们定义了一个 `images` 数组来存储商品页左侧的多个图片链接，同时定义了一个 `activeIndex` 来表示当前选中的图片的索引。在模板中，我们使用 `v-for` 遍历 `images` 数组来渲染缩略图，并且给每个缩略图绑定 `@click` 事件来更新 `activeIndex` 的值。通过计算属性 `currentImage`，我们可以根据 `activeIndex` 来获取当前选中的图片链接，并将其绑定到商品页左侧的图片容器上。最后，通过 CSS 样式来美化商品页的布局和样式。