vue实现点击不同的商品，界面显示商品的信息

首先，你需要在 Vue 实例中定义一个商品列表数据，包含每个商品的信息，比如商品名称、价格、图片等等。然后，在页面中展示商品列表，可以使用 `v-for` 指令渲染每个商品的信息。接下来，为每个商品添加点击事件，当用户点击某个商品时，将当前商品的信息保存到 Vue 实例的 `selectedItem` 属性中。最后，在页面中展示选中的商品的详细信息，可以使用 `v-if` 指令根据 `selectedItem` 属性的值来控制是否展示详细信息。具体代码实现可以参考下面的示例：

<template>
  <div>
    <div v-for="item in itemList" :key="item.id" @click="selectItem(item)">
      <img :src="item.image" alt="">
      <h3>{{ item.name }}</h3>
      <p>{{ item.price }}</p>
    </div>
    <div v-if="selectedItem">
      <img :src="selectedItem.image" alt="">
      <h3>{{ selectedItem.name }}</h3>
      <p>{{ selectedItem.price }}</p>
      <p>{{ selectedItem.description }}</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      itemList: [
        {
          id: 1,
          name: '商品1',
          price: 100,
          image: 'https://example.com/item1.jpg',
          description: '这是商品1的描述'
        },
        {
          id: 2,
          name: '商品2',
          price: 200,
          image: 'https://example.com/item2.jpg',
          description: '这是商品2的描述'
        },
        // 其他商品...
      ],
      selectedItem: null
    }
  },
  methods: {
    selectItem(item) {
      this.selectedItem = item
    }
  }
}
</script>