vue实现一个商品列表页（要求包含关键信息：商品图、商品名、价格）

以下是一个简单的商品列表页的Vue实现，包含了商品图、商品名、价格等关键信息：

<template>
  <div class="product-list">
    <div v-for="product in products" :key="product.id" class="product-item">
      <img :src="product.imageUrl" alt="Product Image">
      <div class="product-info">
        <h3 class="product-name">{{ product.name }}</h3>
        <span class="product-price">{{ product.price }}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      products: [
        {
          id: 1,
          name: 'Product 1',
          price: 10.99,
          imageUrl: 'https://via.placeholder.com/150'
        },
        {
          id: 2,
          name: 'Product 2',
          price: 19.99,
          imageUrl: 'https://via.placeholder.com/150'
        },
        {
          id: 3,
          name: 'Product 3',
          price: 7.99,
          imageUrl: 'https://via.placeholder.com/150'
        },
        {
          id: 4,
          name: 'Product 4',
          price: 12.99,
          imageUrl: 'https://via.placeholder.com/150'
        },
        {
          id: 5,
          name: 'Product 5',
          price: 8.99,
          imageUrl: 'https://via.placeholder.com/150'
        }
      ]
    }
  }
}
</script>

<style>
.product-list {
  display: flex;
  flex-wrap: wrap;
}

.product-item {
  margin: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 150px;
}

.product-info {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.product-name {
  font-size: 16px;
  margin-bottom: 5px;
}

.product-price {
  font-size: 14px;
  color: #f00;
}
</style>