当前位置：首页 > VUE

vue实现商品列表

2026-01-11 20:26:21VUE

Vue实现商品列表的方法

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

<script>
export default {
  data() {
    return {
      products: [
        { id: 1, name: '商品1', price: 100, image: 'product1.jpg' },
        { id: 2, name: '商品2', price: 200, image: 'product2.jpg' }
      ]
    }
  },
  methods: {
    addToCart(product) {
      // 添加购物车逻辑
    }
  }
}
</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;
  text-align: center;
}
</style>

使用API获取商品数据

实际项目中通常从后端API获取商品数据：

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

使用Vuex管理商品状态

对于大型应用，使用Vuex集中管理商品状态：

// store/modules/products.js
const state = {
  products: [],
  currentProduct: null
}

const mutations = {
  SET_PRODUCTS(state, products) {
    state.products = products
  }
}

const actions = {
  async fetchProducts({ commit }) {
    const response = await fetch('/api/products')
    commit('SET_PRODUCTS', await response.json())
  }
}

export default {
  namespaced: true,
  state,
  mutations,
  actions
}

// 在组件中使用
<script>
import { mapState, mapActions } from 'vuex'

export default {
  computed: {
    ...mapState('products', ['products'])
  },
  created() {
    this.fetchProducts()
  },
  methods: {
    ...mapActions('products', ['fetchProducts'])
  }
}
</script>

商品列表分页实现

添加分页功能提升用户体验：

<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: [], // 所有商品数据
      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 {
      products: [],
      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>
  <virtual-list 
    :size="80" 
    :remain="8" 
    :items="products"
  >
    <template v-slot:default="{ item }">
      <product-item :product="item" />
    </template>
  </virtual-list>
</template>

<script>
import VirtualList from 'vue-virtual-scroll-list'

export default {
  components: {
    VirtualList
  },
  data() {
    return {
      products: [] // 大量商品数据
    }
  }
}
</script>