当前位置：首页 > VUE

vue 实现商品展示

2026-02-19 01:53:34VUE

Vue 实现商品展示的方法

数据准备与绑定

商品数据通常以数组形式存储在组件的data或通过API获取，使用v-for指令循环渲染商品列表。示例数据结构：

data() {
  return {
    products: [
      { id: 1, name: '商品A', price: 99, image: 'url1' },
      { id: 2, name: '商品B', price: 199, image: 'url2' }
    ]
  }
}

模板渲染

在模板中使用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.price }}</p>
  </div>
</div>

样式布局

通过CSS Grid或Flexbox实现响应式布局，建议使用CSS模块化方案如Scoped CSS：

vue 实现商品展示

.product-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
}
.product-item {
  border: 1px solid #eee;
  padding: 15px;
  text-align: center;
}

交互功能增强

添加点击事件和购物车功能，通过方法处理用户交互：

<button @click="addToCart(product)">加入购物车</button>

methods: {
  addToCart(product) {
    this.$emit('add-to-cart', product)
  }
}

API数据加载

使用axios或fetch动态获取商品数据，通常在created或mounted生命周期钩子中调用：

vue 实现商品展示

async mounted() {
  try {
    const response = await axios.get('/api/products')
    this.products = response.data
  } catch (error) {
    console.error('加载商品失败:', error)
  }
}

状态管理（可选）

对于复杂应用，建议使用Vuex或Pinia管理商品状态：

// Pinia示例
import { defineStore } from 'pinia'
export const useProductStore = defineStore('products', {
  state: () => ({ products: [] }),
  actions: {
    async fetchProducts() {
      this.products = await api.getProducts()
    }
  }
})

组件化拆分

将商品卡片拆分为独立组件，提高复用性：

<!-- ProductCard.vue -->
<template>
  <div class="product-card">
    <!-- 商品展示内容 -->
  </div>
</template>
<script>
export default {
  props: ['product']
}
</script>