当前位置：首页 > VUE

vue实现商品列表

2026-02-09 09:07:06VUE

Vue 实现商品列表

基本结构搭建

使用 Vue CLI 或 Vite 创建一个新项目，安装必要的依赖。商品列表通常包含以下核心组件：

商品卡片组件（展示图片、名称、价格等）
列表容器组件（排列商品卡片）
筛选/排序功能组件（可选）

数据准备

通过 API 获取或本地模拟商品数据。数据结构示例：

// 模拟数据
const products = [
  {
    id: 1,
    name: '商品A',
    price: 99,
    image: 'url_to_image',
    inventory: 10
  },
  // 更多商品...
]

商品卡片组件

创建 ProductCard.vue 组件：

<template>
  <div class="product-card">
    <img :src="product.image" :alt="product.name">
    <h3>{{ product.name }}</h3>
    <p>¥{{ product.price }}</p>
    <button @click="$emit('add-to-cart', product)">加入购物车</button>
  </div>
</template>

<script>
export default {
  props: {
    product: {
      type: Object,
      required: true
    }
  }
}
</script>

列表容器组件

创建 ProductList.vue 组件：

<template>
  <div class="product-list">
    <ProductCard 
      v-for="product in filteredProducts" 
      :key="product.id" 
      :product="product"
      @add-to-cart="handleAddToCart"
    />
  </div>
</template>

<script>
import ProductCard from './ProductCard.vue'

export default {
  components: { ProductCard },
  props: {
    products: {
      type: Array,
      required: true
    }
  },
  computed: {
    filteredProducts() {
      // 可添加筛选逻辑
      return this.products
    }
  },
  methods: {
    handleAddToCart(product) {
      this.$emit('add-to-cart', product)
    }
  }
}
</script>

状态管理

对于复杂场景，建议使用 Vuex 或 Pinia：

// Pinia 示例
import { defineStore } from 'pinia'

export const useProductStore = defineStore('products', {
  state: () => ({
    products: [],
    cart: []
  }),
  actions: {
    async fetchProducts() {
      const response = await fetch('/api/products')
      this.products = await response.json()
    },
    addToCart(product) {
      this.cart.push(product)
    }
  }
})

筛选与排序

在 ProductList.vue 中添加计算属性：

computed: {
  sortedProducts() {
    return [...this.products].sort((a, b) => a.price - b.price)
  },
  filteredProducts() {
    return this.sortedProducts.filter(product => 
      product.name.includes(this.searchQuery)
    )
  }
}

样式优化

使用 CSS Grid 或 Flexbox 布局商品列表：

.product-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
  padding: 20px;
}

.product-card {
  border: 1px solid #ddd;
  padding: 15px;
  border-radius: 8px;
  transition: transform 0.3s;
}

.product-card:hover {
  transform: translateY(-5px);
}

分页加载

实现无限滚动或分页器组件：

vue实现商品列表

// 无限滚动示例
window.addEventListener('scroll', () => {
  if (window.innerHeight + window.scrollY >= document.body.offsetHeight - 500) {
    this.loadMoreProducts()
  }
})