当前位置：首页 > VUE

vue实现商品显示

2026-01-19 21:27:45VUE

Vue 实现商品显示的基本方法

使用 Vue.js 实现商品显示功能可以通过多种方式完成，包括静态数据展示、动态数据绑定、组件化开发等。以下是几种常见的实现方法：

数据绑定与列表渲染

在 Vue 中，可以使用 v-for 指令循环渲染商品列表。假设有一个商品数组 products，可以在模板中遍历显示：

<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>
      <p>库存: {{ product.stock }}</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      products: [
        { id: 1, name: '商品A', price: 100, stock: 10, image: 'path/to/imageA.jpg' },
        { id: 2, name: '商品B', price: 200, stock: 5, image: 'path/to/imageB.jpg' },
      ],
    };
  },
};
</script>

<style>
.product-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.product-item {
  border: 1px solid #ddd;
  padding: 10px;
  width: 200px;
}
</style>

动态加载数据

通常商品数据会从后端 API 获取，可以使用 axios 或 fetch 请求数据并动态渲染：

<template>
  <div class="product-list">
    <div v-if="loading">加载中...</div>
    <div v-else>
      <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>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      products: [],
      loading: true,
    };
  },
  async created() {
    try {
      const response = await axios.get('https://api.example.com/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 class="product-list">
    <ProductItem
      v-for="product in products"
      :key="product.id"
      :product="product"
      @add-to-cart="handleAddToCart"
    />
  </div>
</template>

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

export default {
  components: { ProductItem },
  data() {
    return {
      products: [], // 从 API 获取或静态数据
    };
  },
  methods: {
    handleAddToCart(product) {
      console.log('加入购物车:', product);
    },
  },
};
</script>

商品筛选与排序

可以添加筛选或排序功能增强用户体验：

<template>
  <div>
    <select v-model="sortBy">
      <option value="price">按价格排序</option>
      <option value="name">按名称排序</option>
    </select>
    <input v-model="searchQuery" placeholder="搜索商品..." />
    <div class="product-list">
      <ProductItem
        v-for="product in filteredProducts"
        :key="product.id"
        :product="product"
      />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      products: [],
      searchQuery: '',
      sortBy: 'price',
    };
  },
  computed: {
    filteredProducts() {
      let filtered = this.products.filter(product =>
        product.name.toLowerCase().includes(this.searchQuery.toLowerCase())
      );
      return filtered.sort((a, b) => (a[this.sortBy] > b[this.sortBy] ? 1 : -1));
    },
  },
};
</script>

响应式布局

使用 CSS 或 UI 框架（如 Vuetify、Element UI）实现响应式商品网格：

<template>
  <div class="product-grid">
    <div v-for="product in products" :key="product.id" class="product-card">
      <!-- 商品内容 -->
    </div>
  </div>
</template>

<style>
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
}
</style>

通过以上方法，可以灵活实现 Vue 中的商品显示功能，并根据需求扩展更多交互特性。

vue实现商品显示