当前位置：首页 > VUE

vue实现商品卡片列表

2026-01-20 23:52:37VUE

Vue实现商品卡片列表

使用Vue实现商品卡片列表需要结合组件化开发思想，通过数据驱动视图的方式动态渲染商品信息。以下是具体实现方法：

数据准备 在Vue组件中定义商品数据数组，每个商品对象包含必要属性：

data() {
  return {
    products: [
      {
        id: 1,
        name: '商品名称1',
        price: 99.9,
        image: 'product1.jpg',
        description: '商品描述信息'
      },
      // 更多商品数据...
    ]
  }
}

模板结构 创建商品卡片的基础HTML结构，使用v-for指令循环渲染：

<div class="product-list">
  <div 
    v-for="product in products" 
    :key="product.id" 
    class="product-card"
  >
    <img :src="product.image" :alt="product.name">
    <h3>{{ product.name }}</h3>
    <p>{{ product.description }}</p>
    <span class="price">¥{{ product.price.toFixed(2) }}</span>
    <button @click="addToCart(product)">加入购物车</button>
  </div>
</div>

样式设计 为商品卡片添加基本CSS样式，确保布局美观：

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

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

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

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

.price {
  color: #f56c6c;
  font-weight: bold;
  font-size: 18px;
}

交互功能 实现基本的交互逻辑，如加入购物车功能：

methods: {
  addToCart(product) {
    // 这里可以调用Vuex或直接emit事件
    this.$emit('add-to-cart', product)
    // 或者显示提示信息
    this.$message.success(`${product.name}已加入购物车`)
  }
}

组件优化 对于大型项目，建议将商品卡片抽离为独立组件：

<!-- ProductCard.vue -->
<template>
  <div class="product-card">
    <!-- 卡片内容 -->
  </div>
</template>

<script>
export default {
  props: {
    product: {
      type: Object,
      required: true
    }
  },
  methods: {
    // 卡片特有方法
  }
}
</script>

分页加载 当商品数量较多时，可以实现分页或无限滚动：

// 在父组件中
loadMore() {
  if (this.loading) return
  this.loading = true
  // 模拟API请求
  setTimeout(() => {
    this.products = [...this.products, ...newProducts]
    this.loading = false
  }, 1000)
}

响应式处理 确保在不同屏幕尺寸下都能良好显示：

vue实现商品卡片列表

@media (max-width: 768px) {
  .product-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .product-list {
    grid-template-columns: 1fr;
  }
}