当前位置：首页 > VUE

vue实现商品切换

2026-02-17 21:07:52VUE

实现商品切换的基本思路

在Vue中实现商品切换功能，通常需要管理商品数据列表和当前显示商品的索引。通过改变索引值来切换显示不同的商品信息。

数据准备与基础结构

创建Vue实例或组件时，定义商品列表和当前索引：

data() {
  return {
    products: [
      { id: 1, name: '商品A', price: 100 },
      { id: 2, name: '商品B', price: 200 },
      { id: 3, name: '商品C', price: 300 }
    ],
    currentIndex: 0
  }
}

计算当前商品

使用计算属性获取当前显示的商品：

computed: {
  currentProduct() {
    return this.products[this.currentIndex]
  }
}

切换方法实现

添加切换商品的方法：

methods: {
  nextProduct() {
    this.currentIndex = (this.currentIndex + 1) % this.products.length
  },
  prevProduct() {
    this.currentIndex = (this.currentIndex - 1 + this.products.length) % this.products.length
  },
  selectProduct(index) {
    this.currentIndex = index
  }
}

模板渲染

在模板中展示商品信息和切换按钮：

<div>
  <h3>{{ currentProduct.name }}</h3>
  <p>价格: {{ currentProduct.price }}</p>

  <button @click="prevProduct">上一个</button>
  <button @click="nextProduct">下一个</button>

  <div>
    <button 
      v-for="(product, index) in products" 
      :key="product.id"
      @click="selectProduct(index)"
      :class="{ active: index === currentIndex }"
    >
      {{ product.name }}
    </button>
  </div>
</div>

添加过渡效果

为商品切换添加过渡动画：

<transition name="fade" mode="out-in">
  <div :key="currentProduct.id">
    <h3>{{ currentProduct.name }}</h3>
    <p>价格: {{ currentProduct.price }}</p>
  </div>
</transition>

.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}

组件化实现

对于复杂场景，可将商品展示和切换逻辑拆分为独立组件：

// ProductDisplay.vue
<template>
  <div>
    <slot :product="currentProduct"></slot>
    <button @click="prev">上一项</button>
    <button @click="next">下一项</button>
  </div>
</template>

<script>
export default {
  props: {
    items: Array,
    initialIndex: { type: Number, default: 0 }
  },
  data() {
    return {
      currentIndex: this.initialIndex
    }
  },
  computed: {
    currentProduct() {
      return this.items[this.currentIndex]
    }
  },
  methods: {
    next() {
      this.$emit('change', (this.currentIndex + 1) % this.items.length)
    },
    prev() {
      this.$emit('change', (this.currentIndex - 1 + this.items.length) % this.items.length)
    }
  }
}
</script>

vue实现商品切换