用组件实现一个商品列表页
时间: 2024-04-30 12:22:23 浏览: 24
以下是一个简单的商品列表页组件示例,使用Vue.js实现:
```html
<template>
<div class="product-list">
<div v-for="(product, index) in products" :key="index" class="product-item">
<img :src="product.image" :alt="product.name" class="product-image">
<h3 class="product-name">{{ product.name }}</h3>
<p class="product-price">{{ product.price }}</p>
<button class="add-to-cart" @click="addToCart(product)">Add to Cart</button>
</div>
</div>
</template>
<script>
export default {
props: {
products: {
type: Array,
required: true
}
},
methods: {
addToCart(product) {
// 将商品添加到购物车
}
}
}
</script>
<style>
.product-list {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: 0 -10px;
}
.product-item {
width: calc(33.33% - 20px);
margin: 20px 10px;
text-align: center;
}
.product-image {
width: 100%;
height: 200px;
object-fit: cover;
margin-bottom: 10px;
}
.product-name {
font-size: 1.2rem;
margin-bottom: 5px;
}
.product-price {
font-size: 1.1rem;
margin-bottom: 10px;
}
.add-to-cart {
background-color: #4caf50;
color: #fff;
border: none;
padding: 10px 20px;
border-radius: 10px;
cursor: pointer;
transition: all 0.3s ease;
}
.add-to-cart:hover {
background-color: #3e8e41;
}
</style>
```
在父组件中,可以将商品列表传递给该组件的`products`属性。
```html
<template>
<div class="app">
<h1>Product List</h1>
<product-list :products="products"></product-list>
</div>
</template>
<script>
import ProductList from './ProductList.vue';
export default {
components: {
ProductList
},
data() {
return {
products: [
{ id: 1, name: 'Product 1', price: 9.99, image: 'https://via.placeholder.com/200x200?text=Product+1' },
{ id: 2, name: 'Product 2', price: 19.99, image: 'https://via.placeholder.com/200x200?text=Product+2' },
{ id: 3, name: 'Product 3', price: 29.99, image: 'https://via.placeholder.com/200x200?text=Product+3' },
{ id: 4, name: 'Product 4', price: 39.99, image: 'https://via.placeholder.com/200x200?text=Product+4' },
{ id: 5, name: 'Product 5', price: 49.99, image: 'https://via.placeholder.com/200x200?text=Product+5' }
]
}
}
}
</script>
<style>
.app {
max-width: 1200px;
margin: 0 auto;
}
</style>
```
这个示例只是一个简单的商品列表页,如果需要更多功能,如分页、筛选、搜索等,需要根据具体需求进行开发。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![.zip](https://img-home.csdnimg.cn/images/20210720083646.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_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)