vue 实现商品列表

实现商品列表的基本结构

在Vue中实现商品列表，通常需要创建一个组件来展示商品数据。可以使用v-for指令循环渲染商品列表，并通过数据绑定动态显示商品信息。

<template>
  <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>
      <button @click="addToCart(product)">加入购物车</button>
    </div>
  </div>
</template>

定义商品数据

商品数据可以存储在组件的data属性中，或者通过API从后端获取。以下是静态数据的示例：

<script>
export default {
  data() {
    return {
      products: [
        { id: 1, name: '商品1', price: '¥100', image: 'image1.jpg' },
        { id: 2, name: '商品2', price: '¥200', image: 'image2.jpg' },
        { id: 3, name: '商品3', price: '¥300', image: 'image3.jpg' }
      ]
    }
  },
  methods: {
    addToCart(product) {
      console.log('添加商品:', product.name)
    }
  }
}
</script>

动态加载商品数据

如果需要从后端API加载商品数据，可以使用axios或其他HTTP库。在created或mounted钩子中发起请求：

<script>
import axios from 'axios'

export default {
  data() {
    return {
      products: []
    }
  },
  mounted() {
    axios.get('/api/products')
      .then(response => {
        this.products = response.data
      })
      .catch(error => {
        console.error('加载商品数据失败:', error)
      })
  }
}
</script>

样式设计

使用CSS为商品列表添加样式，确保布局美观且响应式：

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

.product-item {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 15px;
  text-align: center;
}

.product-item img {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
}

.product-item h3 {
  margin: 10px 0;
  font-size: 1.2em;
}

.product-item p {
  color: #e63946;
  font-weight: bold;
}

.product-item button {
  background-color: #007bff;
  color: white;
  border: none;
  padding: 8px 15px;
  border-radius: 4px;
  cursor: pointer;
}

.product-item button:hover {
  background-color: #0056b3;
}
</style>

分页功能

如果商品数量较多，可以添加分页功能。使用v-pagination组件或自定义分页逻辑：

<template>
  <div>
    <product-list :products="paginatedProducts" />
    <div class="pagination">
      <button 
        v-for="page in totalPages" 
        :key="page" 
        @click="currentPage = page"
        :class="{ active: currentPage === page }"
      >
        {{ page }}
      </button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      products: [], // 从API加载的数据
      currentPage: 1,
      itemsPerPage: 10
    }
  },
  computed: {
    totalPages() {
      return Math.ceil(this.products.length / this.itemsPerPage)
    },
    paginatedProducts() {
      const start = (this.currentPage - 1) * this.itemsPerPage
      const end = start + this.itemsPerPage
      return this.products.slice(start, end)
    }
  }
}
</script>

商品搜索与筛选

添加搜索框和筛选功能，提升用户体验：

<template>
  <div>
    <input v-model="searchQuery" placeholder="搜索商品" />
    <select v-model="selectedCategory">
      <option value="">所有分类</option>
      <option v-for="category in categories" :value="category">
        {{ category }}
      </option>
    </select>
    <product-list :products="filteredProducts" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchQuery: '',
      selectedCategory: '',
      categories: ['电子产品', '服装', '家居']
    }
  },
  computed: {
    filteredProducts() {
      return this.products.filter(product => {
        const matchesSearch = product.name.toLowerCase().includes(
          this.searchQuery.toLowerCase()
        )
        const matchesCategory = !this.selectedCategory || 
          product.category === this.selectedCategory
        return matchesSearch && matchesCategory
      })
    }
  }
}
</script>