当前位置：首页 > VUE

vue实现商品列表代码

2026-01-20 02:00:26VUE

以下是一个基于Vue.js的商品列表实现示例，包含基础功能如数据渲染、分页和筛选：

基础商品列表渲染

<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>

<script>
export default {
  data() {
    return {
      products: [
        { id: 1, name: '商品A', price: 99, image: '/path/to/image1.jpg' },
        { id: 2, name: '商品B', price: 199, image: '/path/to/image2.jpg' }
      ]
    }
  },
  methods: {
    addToCart(product) {
      // 购物车逻辑
    }
  }
}
</script>

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

添加分页功能

export default {
  data() {
    return {
      currentPage: 1,
      pageSize: 5,
      allProducts: [...], // 完整商品数据
    }
  },
  computed: {
    paginatedProducts() {
      const start = (this.currentPage - 1) * this.pageSize
      return this.allProducts.slice(start, start + this.pageSize)
    },
    totalPages() {
      return Math.ceil(this.allProducts.length / this.pageSize)
    }
  }
}

实现筛选功能

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

商品排序实现

export default {
  data() {
    return {
      sortBy: 'price',
      sortDirection: 'asc'
    }
  },
  computed: {
    sortedProducts() {
      return [...this.filteredProducts].sort((a, b) => {
        const modifier = this.sortDirection === 'asc' ? 1 : -1
        return a[this.sortBy] > b[this.sortBy] ? 1 * modifier : -1 * modifier
      })
    }
  },
  methods: {
    changeSort(field) {
      if (this.sortBy === field) {
        this.sortDirection = this.sortDirection === 'asc' ? 'desc' : 'asc'
      } else {
        this.sortBy = field
        this.sortDirection = 'asc'
      }
    }
  }
}

商品搜索功能

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

以上代码可根据实际需求组合使用，构建完整的商品列表功能。建议使用Vuex或Pinia管理状态，对于大型电商项目可考虑使用服务端分页和筛选。

vue实现商品列表代码