用vue写一个展示商品的页面
时间: 2024-05-29 19:03:55 浏览: 13
好的,以下是一个简单的展示商品页面的 Vue 代码示例:
```
<template>
<div>
<h1>{{ title }}</h1>
<div v-for="product in products" :key="product.id">
<h2>{{ product.name }}</h2>
<p>{{ product.description }}</p>
<img :src="product.image" alt="product image">
<p>Price: {{ product.price }}</p>
</div>
</div>
</template>
<script>
export default {
data() {
return {
title: 'Product Catalog',
products: [
{
id: 1,
name: 'Product 1',
description: 'This is the description of product 1',
image: 'https://via.placeholder.com/150',
price: 10.99
},
{
id: 2,
name: 'Product 2',
description: 'This is the description of product 2',
image: 'https://via.placeholder.com/150',
price: 19.99
},
{
id: 3,
name: 'Product 3',
description: 'This is the description of product 3',
image: 'https://via.placeholder.com/150',
price: 7.99
}
]
}
}
}
</script>
```
在上面的代码中,我们首先定义了一个 `title` 变量和一个 `products` 数组,其中每个元素都代表了一个商品的信息,包括商品名、描述、图片和价格。然后我们使用了 `v-for` 指令来遍历 `products` 数组,为每个商品渲染一个 `<div>` 元素,并显示商品名、描述、图片和价格。