vue实现产品列表

实现产品列表的Vue方案

基础结构搭建

使用Vue CLI或Vite创建项目后，在组件目录下新建ProductList.vue。组件需要包含模板、脚本和样式三部分：

<template>
  <div class="product-list">
    <h2>产品列表</h2>
    <ul>
      <li v-for="product in products" :key="product.id">
        {{ product.name }} - ¥{{ product.price }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      products: [
        { id: 1, name: '产品A', price: 99 },
        { id: 2, name: '产品B', price: 199 }
      ]
    }
  }
}
</script>

动态数据加载

通过axios从API获取数据：

<script>
import axios from 'axios';

export default {
  data() {
    return {
      products: [],
      loading: false
    }
  },
  async created() {
    this.loading = true;
    try {
      const response = await axios.get('/api/products');
      this.products = response.data;
    } catch (error) {
      console.error('获取产品失败:', error);
    } finally {
      this.loading = false;
    }
  }
}
</script>

列表项组件化

创建ProductItem.vue子组件提高复用性：

<template>
  <div class="product-item">
    <img :src="product.image" :alt="product.name">
    <h3>{{ product.name }}</h3>
    <p>价格: {{ product.price }}</p>
    <button @click="$emit('add-to-cart', product)">加入购物车</button>
  </div>
</template>

<script>
export default {
  props: {
    product: {
      type: Object,
      required: true
    }
  }
}
</script>

分页功能实现

添加分页控制逻辑：

<template>
  <div>
    <ProductItem 
      v-for="product in paginatedProducts"
      :product="product"
      @add-to-cart="handleAddToCart"
    />
    <div class="pagination">
      <button 
        v-for="page in totalPages" 
        :key="page"
        @click="currentPage = page"
      >
        {{ page }}
      </button>
    </div>
  </div>
</template>

<script>
import ProductItem from './ProductItem.vue';

export default {
  components: { ProductItem },
  data() {
    return {
      products: [],
      currentPage: 1,
      itemsPerPage: 5
    }
  },
  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>
    <ProductItem 
      v-for="product in filteredProducts"
      :product="product"
    />
  </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>

性能优化

对于大型列表使用虚拟滚动：

<template>
  <RecycleScroller
    class="scroller"
    :items="products"
    :item-size="100"
    key-field="id"
  >
    <template v-slot="{ item }">
      <ProductItem :product="item" />
    </template>
  </RecycleScroller>
</template>

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

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