vue编写的商品首页模板
时间: 2024-01-16 22:11:46 浏览: 46
下面是一个简单的Vue商品首页模板,你可以根据具体需求进行修改和扩展:
```html
<template>
<div>
<h1>商品列表</h1>
<ul>
<li v-for="item in items" :key="item.id">
<img :src="item.image" alt="商品图片" />
<h2>{{ item.name }}</h2>
<p>{{ item.description }}</p>
<p>价格:{{ item.price }}</p>
<button @click="addToCart(item)">加入购物车</button>
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
items: [
{
id: 1,
name: '商品1',
description: '这是商品1的描述',
price: 99.99,
image: 'https://picsum.photos/id/237/200/300'
},
{
id: 2,
name: '商品2',
description: '这是商品2的描述',
price: 199.99,
image: 'https://picsum.photos/id/238/200/300'
},
{
id: 3,
name: '商品3',
description: '这是商品3的描述',
price: 299.99,
image: 'https://picsum.photos/id/239/200/300'
}
]
}
},
methods: {
addToCart(item) {
// 加入购物车的逻辑
}
}
}
</script>
```
这个模板包含一个商品列表,每个商品都有图片、名称、描述、价格和加入购物车的按钮。你可以根据需求修改样式和功能。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)