vue 实现商品列表

实现商品列表的基本结构

在Vue中实现商品列表，通常需要创建一个组件来展示商品数据。商品数据可以存储在组件的data属性中，或者通过API从后端获取。以下是一个基本的商品列表实现示例：

<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)">Add to Cart</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      products: [
        { id: 1, name: 'Product 1', price: '$10', image: 'image1.jpg' },
        { id: 2, name: 'Product 2', price: '$20', image: 'image2.jpg' },
        { id: 3, name: 'Product 3', price: '$30', image: 'image3.jpg' }
      ]
    }
  },
  methods: {
    addToCart(product) {
      console.log('Added to cart:', product)
    }
  }
}
</script>

<style scoped>
.product-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
}
.product-item {
  border: 1px solid #ddd;
  padding: 10px;
  text-align: center;
}
</style>

从API获取商品数据

实际项目中，商品数据通常从后端API获取。可以使用axios或fetch来请求数据：

<script>
import axios from 'axios'

export default {
  data() {
    return {
      products: [],
      isLoading: false,
      error: null
    }
  },
  async created() {
    try {
      this.isLoading = true
      const response = await axios.get('https://api.example.com/products')
      this.products = response.data
    } catch (error) {
      this.error = error.message
    } finally {
      this.isLoading = false
    }
  }
}
</script>

添加分页功能

对于大量商品数据，实现分页可以提高性能：

<template>
  <div>
    <product-list :products="currentPageProducts" />
    <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: [], // 所有商品数据
      currentPage: 1,
      itemsPerPage: 10
    }
  },
  computed: {
    totalPages() {
      return Math.ceil(this.products.length / this.itemsPerPage)
    },
    currentPageProducts() {
      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="Search products..." />
    <select v-model="selectedCategory">
      <option value="">All Categories</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: ['Electronics', 'Clothing', 'Books']
    }
  },
  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>

优化商品列表性能

对于大型商品列表，可以使用虚拟滚动来提高性能：

<template>
  <RecycleScroller
    class="scroller"
    :items="products"
    :item-size="100"
    key-field="id"
    v-slot="{ item }"
  >
    <div class="product-item">
      <img :src="item.image" :alt="item.name" />
      <h3>{{ item.name }}</h3>
      <p>{{ item.price }}</p>
    </div>
  </RecycleScroller>
</template>

<script>
import { RecycleScroller } from 'vue-virtual-scroller'
import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'

export default {
  components: {
    RecycleScroller
  }
}
</script>

添加商品排序功能

允许用户按不同条件排序商品：

<template>
  <div>
    <select v-model="sortBy">
      <option value="name">Name</option>
      <option value="price">Price</option>
      <option value="rating">Rating</option>
    </select>
    <select v-model="sortDirection">
      <option value="asc">Ascending</option>
      <option value="desc">Descending</option>
    </select>

    <product-list :products="sortedProducts" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      sortBy: 'name',
      sortDirection: 'asc'
    }
  },
  computed: {
    sortedProducts() {
      return [...this.products].sort((a, b) => {
        let modifier = this.sortDirection === 'asc' ? 1 : -1
        if (a[this.sortBy] < b[this.sortBy]) return -1 * modifier
        if (a[this.sortBy] > b[this.sortBy]) return 1 * modifier
        return 0
      })
    }
  }
}
</script>

这些方法提供了实现商品列表的核心功能，可以根据实际项目需求进行组合和扩展。