vue实现商品切换

Vue 实现商品切换功能

在 Vue 中实现商品切换功能，可以通过动态绑定数据和事件处理来实现。以下是几种常见的方法：

使用 v-for 渲染商品列表

<template>
  <div>
    <div v-for="(product, index) in products" :key="product.id">
      <h3>{{ product.name }}</h3>
      <p>{{ product.price }}</p>
      <img :src="product.image" alt="product image">
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      products: [
        { id: 1, name: '商品1', price: 100, image: 'product1.jpg' },
        { id: 2, name: '商品2', price: 200, image: 'product2.jpg' }
      ]
    }
  }
}
</script>

实现单个商品切换

<template>
  <div>
    <button @click="prevProduct">上一个</button>
    <div>
      <h3>{{ currentProduct.name }}</h3>
      <p>{{ currentProduct.price }}</p>
      <img :src="currentProduct.image" alt="product image">
    </div>
    <button @click="nextProduct">下一个</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      products: [
        { id: 1, name: '商品1', price: 100, image: 'product1.jpg' },
        { id: 2, name: '商品2', price: 200, image: 'product2.jpg' }
      ],
      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
    }
  }
}
</script>

使用 Vue Transition 添加动画效果

<template>
  <div>
    <button @click="prevProduct">上一个</button>
    <transition name="fade" mode="out-in">
      <div :key="currentProduct.id">
        <h3>{{ currentProduct.name }}</h3>
        <p>{{ currentProduct.price }}</p>
        <img :src="currentProduct.image" alt="product image">
      </div>
    </transition>
    <button @click="nextProduct">下一个</button>
  </div>
</template>

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

使用 Vue Router 实现商品详情页切换

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

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

这些方法可以根据实际需求选择使用，或者组合使用来实现更复杂的商品切换功能。