vue实现商品的渲染

实现商品列表渲染

使用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: '商品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: [],
      isLoading: false
    }
  },
  async created() {
    this.isLoading = true
    try {
      const response = await fetch('https://api.example.com/products')
      this.products = await response.json()
    } catch (error) {
      console.error('获取商品失败:', error)
    } finally {
      this.isLoading = false
    }
  }
}
</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>

    <div v-if="filteredProducts.length === 0">没有找到匹配的商品</div>
    <ProductList :products="filteredProducts" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchQuery: '',
      selectedCategory: '',
      categories: ['电子产品', '服装', '食品'],
      allProducts: [] // 从API获取
    }
  },
  computed: {
    filteredProducts() {
      return this.allProducts.filter(product => {
        const matchesSearch = product.name.toLowerCase().includes(
          this.searchQuery.toLowerCase()
        )
        const matchesCategory = !this.selectedCategory || 
          product.category === this.selectedCategory
        return matchesSearch && matchesCategory
      })
    }
  }
}
</script>

商品分页展示

处理大量商品时实现分页功能：

<template>
  <div>
    <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 {
      currentPage: 1,
      itemsPerPage: 10,
      allProducts: [] // 从API获取
    }
  },
  computed: {
    paginatedProducts() {
      const start = (this.currentPage - 1) * this.itemsPerPage
      return this.allProducts.slice(start, start + this.itemsPerPage)
    },
    totalPages() {
      return Math.ceil(this.allProducts.length / this.itemsPerPage)
    }
  }
}
</script>

商品详情页实现

点击商品跳转到详情页的实现：

// 路由配置
const routes = [
  { path: '/products', component: ProductList },
  { path: '/products/:id', component: ProductDetail }
]

// ProductList.vue
<template>
  <div v-for="product in products" :key="product.id">
    <router-link :to="`/products/${product.id}`">
      {{ product.name }}
    </router-link>
  </div>
</template>

// ProductDetail.vue
<script>
export default {
  data() {
    return {
      product: null
    }
  },
  async created() {
    const productId = this.$route.params.id
    const response = await fetch(`https://api.example.com/products/${productId}`)
    this.product = await response.json()
  }
}
</script>

这些实现方式涵盖了商品展示的主要场景，可根据实际项目需求进行调整和扩展。