当前位置：首页 > VUE

vue 实现商品列表

2026-02-18 16:32:40VUE

实现商品列表的基本结构

在Vue中实现商品列表，需要创建一个组件来展示商品数据。商品数据通常以数组形式存储，每个商品对象包含名称、价格、图片等属性。

<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>
    </div>
  </div>
</template>

<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' }
      ]
    }
  }
}
</script>

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

从API获取商品数据

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

<script>
import axios from 'axios';

export default {
  data() {
    return {
      products: []
    }
  },
  async created() {
    try {
      const response = await axios.get('https://api.example.com/products');
      this.products = response.data;
    } catch (error) {
      console.error('获取商品数据失败:', error);
    }
  }
}
</script>

添加商品筛选功能

为商品列表添加筛选功能，如按价格范围或类别筛选。

<template>
  <div>
    <div class="filters">
      <input v-model="minPrice" type="number" placeholder="最低价格">
      <input v-model="maxPrice" type="number" placeholder="最高价格">
    </div>
    <div class="product-list">
      <div v-for="product in filteredProducts" :key="product.id" class="product-item">
        <!-- 商品内容 -->
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      products: [],
      minPrice: null,
      maxPrice: null
    }
  },
  computed: {
    filteredProducts() {
      return this.products.filter(product => {
        const meetsMin = this.minPrice ? product.price >= this.minPrice : true;
        const meetsMax = this.maxPrice ? product.price <= this.maxPrice : true;
        return meetsMin && meetsMax;
      });
    }
  }
}
</script>

实现分页功能

对于大量商品数据，添加分页功能提升用户体验。

<template>
  <div>
    <div class="product-list">
      <!-- 商品列表 -->
    </div>
    <div class="pagination">
      <button @click="prevPage" :disabled="currentPage === 1">上一页</button>
      <span>第 {{ currentPage }} 页</span>
      <button @click="nextPage" :disabled="currentPage === totalPages">下一页</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      products: [],
      currentPage: 1,
      itemsPerPage: 10
    }
  },
  computed: {
    paginatedProducts() {
      const start = (this.currentPage - 1) * this.itemsPerPage;
      const end = start + this.itemsPerPage;
      return this.products.slice(start, end);
    },
    totalPages() {
      return Math.ceil(this.products.length / this.itemsPerPage);
    }
  },
  methods: {
    nextPage() {
      if (this.currentPage < this.totalPages) {
        this.currentPage++;
      }
    },
    prevPage() {
      if (this.currentPage > 1) {
        this.currentPage--;
      }
    }
  }
}
</script>

添加商品排序功能

允许用户按价格、名称等属性对商品排序。

<template>
  <div>
    <select v-model="sortBy">
      <option value="price">按价格排序</option>
      <option value="name">按名称排序</option>
    </select>
    <div class="product-list">
      <div v-for="product in sortedProducts" :key="product.id">
        <!-- 商品内容 -->
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      products: [],
      sortBy: 'price'
    }
  },
  computed: {
    sortedProducts() {
      return [...this.products].sort((a, b) => {
        if (this.sortBy === 'price') {
          return a.price - b.price;
        } else {
          return a.name.localeCompare(b.name);
        }
      });
    }
  }
}
</script>

添加商品到购物车功能

实现将商品添加到购物车的功能，需要创建购物车状态管理。

<template>
  <div class="product-item">
    <!-- 商品内容 -->
    <button @click="addToCart(product)">加入购物车</button>
  </div>
</template>

<script>
export default {
  methods: {
    addToCart(product) {
      this.$store.commit('addToCart', product);
      // 或使用事件总线 this.$emit('add-to-cart', product);
    }
  }
}
</script>

对于更复杂的应用，建议使用Vuex管理购物车状态。

vue 实现商品列表