当前位置：首页 > VUE

vue实现商品展示

2026-01-17 21:13:09VUE

使用 Vue 实现商品展示

商品数据准备

商品数据可以存储在 Vue 组件的 data 中，或者通过 API 从后端获取。以下是一个简单的商品数据示例：

data() {
  return {
    products: [
      {
        id: 1,
        name: '商品1',
        price: 100,
        image: 'product1.jpg',
        description: '商品1的描述'
      },
      {
        id: 2,
        name: '商品2',
        price: 200,
        image: 'product2.jpg',
        description: '商品2的描述'
      }
    ]
  }
}

商品列表渲染

使用 v-for 指令遍历商品数据，动态生成商品列表：

<div class="product-list">
  <div v-for="product in products" :key="product.id" class="product-item">
    <img :src="product.image" :alt="product.name">
    <h3>{{ product.name }}</h3>
    <p>{{ product.description }}</p>
    <span>{{ product.price }}元</span>
  </div>
</div>

商品样式设计

通过 CSS 为商品列表添加样式，使其更具吸引力：

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

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

.product-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.product-item img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 5px;
}

商品筛选功能

添加筛选功能，例如按价格或类别筛选商品：

data() {
  return {
    products: [...],
    filters: {
      priceRange: [0, 1000],
      category: ''
    }
  }
},
computed: {
  filteredProducts() {
    return this.products.filter(product => {
      return product.price >= this.filters.priceRange[0] && 
             product.price <= this.filters.priceRange[1] &&
             (this.filters.category === '' || product.category === this.filters.category)
    })
  }
}

商品分页展示

对于大量商品，可以实现分页功能：

data() {
  return {
    currentPage: 1,
    itemsPerPage: 8
  }
},
computed: {
  paginatedProducts() {
    const start = (this.currentPage - 1) * this.itemsPerPage
    const end = start + this.itemsPerPage
    return this.filteredProducts.slice(start, end)
  },
  totalPages() {
    return Math.ceil(this.filteredProducts.length / this.itemsPerPage)
  }
}

商品详情页

创建商品详情组件，展示商品的详细信息：

<template>
  <div class="product-detail">
    <img :src="product.image" :alt="product.name">
    <h1>{{ product.name }}</h1>
    <p class="price">{{ product.price }}元</p>
    <p class="description">{{ product.description }}</p>
    <button @click="addToCart">加入购物车</button>
  </div>
</template>

<script>
export default {
  props: ['product'],
  methods: {
    addToCart() {
      this.$emit('add-to-cart', this.product)
    }
  }
}
</script>

商品搜索功能

实现商品搜索功能，让用户可以通过关键词查找商品：

data() {
  return {
    searchQuery: ''
  }
},
computed: {
  searchedProducts() {
    if (!this.searchQuery) return this.products
    const query = this.searchQuery.toLowerCase()
    return this.products.filter(product => 
      product.name.toLowerCase().includes(query) || 
      product.description.toLowerCase().includes(query)
    )
  }
}

这些方法可以帮助快速实现一个功能完善的商品展示页面，根据实际需求可以进一步扩展功能。

vue实现商品展示