用vue实现一个商品列表，包含图片、价格、商品名

以下是一个简单的示例代码，实现了一个商品列表，包含图片、价格、商品名：

<template>
  <div>
    <h2>商品列表</h2>
    <div class="product-list">
      <div v-for="product in products" :key="product.id" class="product">
        <img :src="product.image" alt="product image" class="product-image">
        <div class="product-info">
          <h3 class="product-name">{{ product.name }}</h3>
          <span class="product-price">{{ product.price }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      products: [
        {
          id: 1,
          name: "商品1",
          price: 100,
          image: "https://via.placeholder.com/150"
        },
        {
          id: 2,
          name: "商品2",
          price: 200,
          image: "https://via.placeholder.com/150"
        },
        {
          id: 3,
          name: "商品3",
          price: 300,
          image: "https://via.placeholder.com/150"
        }
      ]
    };
  }
};
</script>

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

.product {
  width: 300px;
  margin: 10px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
}

.product-image {
  display: block;
  margin: 0 auto;
}

.product-info {
  text-align: center;
}

.product-name {
  margin-top: 10px;
}

.product-price {
  font-weight: bold;
  color: red;
}
</style>

这个组件首先定义了一个 `products` 数组，包含了三个商品的信息，每个商品都有一个 `id`、`name`、`price` 和 `image` 属性。

然后在模板中使用 `v-for` 循环渲染每个商品，使用 `:src` 绑定图片的 `src` 属性，使用插值 `{{ }}` 显示商品名和价格。

最后使用一些简单的样式美化商品列表。