在Vue中，我們可以通過使用列表組件（List Component）來渲染商品列表。下面是一個(gè)基本的示例代碼：

<template>
  <div class="product-list">
    <ul>
      <li v-for="product in products" :key="product.id">
        {{ product.name }} - {{ product.price }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      products: [
        { id: 1, name: '商品1', price: 100 },
        { id: 2, name: '商品2', price: 200 },
        // ...更多商品數(shù)據(jù)...
      ],
    };
  },
};
</script>

在上述代碼中，我們首先定義了一個(gè)products數(shù)組作為產(chǎn)品的數(shù)據(jù)源。然后，在模板部分，我們使用v-for指令遍歷這個(gè)數(shù)組，并使用:key綁定每個(gè)產(chǎn)品的ID，以便在列表中為每個(gè)產(chǎn)品創(chuàng)建一個(gè)獨(dú)特的位置。同時(shí)，我們使用<li>標(biāo)簽包裹每個(gè)產(chǎn)品，并在其中顯示產(chǎn)品的name和price屬性。

這只是一個(gè)簡單的示例，實(shí)際的代碼可能會(huì)根據(jù)具體的需求和設(shè)計(jì)有所不同。例如，你可能需要添加更多的屬性到產(chǎn)品對象中，或者調(diào)整列表的樣式等。