vue实现商品切换

实现商品切换功能

在Vue中实现商品切换功能通常涉及数据绑定、事件处理和动态渲染。以下是几种常见方法：

数据驱动切换

创建商品数据数组和当前索引，通过修改索引实现切换：

data() {
  return {
    products: [
      { id: 1, name: '商品A', price: 100 },
      { id: 2, name: '商品B', price: 200 }
    ],
    currentIndex: 0
  }
},
computed: {
  currentProduct() {
    return this.products[this.currentIndex]
  }
}

模板部分：

<div>
  <h3>{{ currentProduct.name }}</h3>
  <p>价格: {{ currentProduct.price }}</p>
  <button @click="currentIndex = (currentIndex + 1) % products.length">切换商品</button>
</div>

组件化实现

创建可复用的商品组件，通过props传递不同商品数据：

components: {
  'product-item': {
    props: ['product'],
    template: `
      <div>
        <h3>{{ product.name }}</h3>
        <p>价格: {{ product.price }}</p>
      </div>
    `
  }
}

父组件中使用v-for和v-if控制显示：

<div v-for="(product, index) in products" :key="product.id">
  <product-item 
    v-if="index === currentIndex"
    :product="product"
  />
</div>

动画过渡效果

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

<transition name="fade" mode="out-in">
  <product-item 
    :key="currentProduct.id"
    :product="currentProduct"
  />
</transition>

CSS过渡样式：

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

商品选项卡切换

实现选项卡式商品切换：

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

路由参数切换

通过路由参数实现商品切换：

const routes = [
  { path: '/product/:id', component: ProductDetail }
]

商品列表页：

<router-link 
  v-for="product in products" 
  :key="product.id"
  :to="'/product/' + product.id"
>
  {{ product.name }}
</router-link>

商品详情页通过$route.params.id获取当前商品ID。

这些方法可以根据具体需求组合使用，实现不同复杂度的商品切换功能。