在網上購物時，商品櫥窗是一個很常見的功能，它能夠讓用戶看到商品的圖片和相關信息，從而能夠更好地判斷是否需要購買該商品。在前端開發中，Vue是一個非常流行的框架，它提供了很多方便的功能來實現這種商品櫥窗。接下來，我們來看一下如何使用Vue來實現一個商品櫥窗。 首先，我們需要一個商品列表，可以使用一個數組來存儲商品的信息，每個商品都有一個圖片、名稱和價格。這個數組可以在Vue的data中定義，如下所示：

data: {
products: [
{
image: 'https://example.com/img1.jpg',
name: '商品1',
price: 10.99
},
{
image: 'https://example.com/img2.jpg',
name: '商品2',
price: 20.99
},
{
image: 'https://example.com/img3.jpg',
name: '商品3',
price: 30.99
}
]
}

接下來，我們需要在頁面中展示商品列表。可以使用v-for指令來遍歷products數組，根據每個商品的信息創建一個商品卡片。商品卡片可以使用一個組件來表示，如下所示：

Vue.component('product-card', {
props: ['product'],
template: `
{{ product.name }}
{{ product.price }}
`
});

這個組件接受一個product屬性，表示要展示的商品信息。template中的內容就是一個商品卡片的HTML結構，其中使用了Vue的綁定語法來展示商品的圖片、名稱和價格。 接下來，在頁面中使用v-for指令遍歷products數組，并使用product-card組件來展示每個商品。如下所示：

這個代碼將products數組中的每個商品傳遞給product-card組件，并在頁面中展示出來。 以上就是使用Vue實現商品櫥窗的基礎代碼，可以根據自己的需求進行進一步的擴展。通過Vue的組件化和數據綁定特性，我們可以非常方便地實現這種功能，在開發過程中能夠提高開發效率，減輕開發難度。