vue实现商品展示
使用 Vue 实现商品展示
商品数据准备
商品数据可以存储在 Vue 组件的 data 中，或者通过 API 从后端获取。以下是一个简单的商品数据示例：
data() {
return {
products: [
{
id: 1,
name: '商品1',
price: 100,
image: 'product1.jpg',
description: '商品1的描述'
},
{
id: 2,
name: '商品2',
price: 200,
image: 'product2.jpg',
description: '商品2的描述'
}
]
}
}商品列表渲染
使用 v-for 指令遍历商品数据，动态生成商品列表：
<div class="product-list">
<div v-for="product in products" :key="product.id" class="product-item">
<img :src="product.image" :alt="product.name">
<h3>{{ product.name }}</h3>
<p>{{ product.description }}</p>
<span>{{ product.price }}元</span>
</div>
</div>商品样式设计
通过 CSS 为商品列表添加样式，使其更具吸引力：
.product-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 20px;
}
.product-item {
border: 1px solid #ddd;
padding: 15px;
border-radius: 5px;
transition: transform 0.3s;
}
.product-item:hover {
transform: translateY(-5px);
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.product-item img {
width: 100%;
height: 200px;
object-fit: cover;
border-radius: 5px;
}商品筛选功能
添加筛选功能，例如按价格或类别筛选商品：
data() {
return {
products: [...],
filters: {
priceRange: [0, 1000],
category: ''
}
}
},
computed: {
filteredProducts() {
return this.products.filter(product => {
return product.price >= this.filters.priceRange[0] &&
product.price <= this.filters.priceRange[1] &&
(this.filters.category === '' || product.category === this.filters.category)
})
}
}商品分页展示
对于大量商品，可以实现分页功能：
data() {
return {
currentPage: 1,
itemsPerPage: 8
}
},
computed: {
paginatedProducts() {
const start = (this.currentPage - 1) * this.itemsPerPage
const end = start + this.itemsPerPage
return this.filteredProducts.slice(start, end)
},
totalPages() {
return Math.ceil(this.filteredProducts.length / this.itemsPerPage)
}
}商品详情页
创建商品详情组件，展示商品的详细信息：
<template>
<div class="product-detail">
<img :src="product.image" :alt="product.name">
<h1>{{ product.name }}</h1>
<p class="price">{{ product.price }}元</p>
<p class="description">{{ product.description }}</p>
<button @click="addToCart">加入购物车</button>
</div>
</template>
<script>
export default {
props: ['product'],
methods: {
addToCart() {
this.$emit('add-to-cart', this.product)
}
}
}
</script>商品搜索功能
实现商品搜索功能，让用户可以通过关键词查找商品：
data() {
return {
searchQuery: ''
}
},
computed: {
searchedProducts() {
if (!this.searchQuery) return this.products
const query = this.searchQuery.toLowerCase()
return this.products.filter(product =>
product.name.toLowerCase().includes(query) ||
product.description.toLowerCase().includes(query)
)
}
}这些方法可以帮助快速实现一个功能完善的商品展示页面，根据实际需求可以进一步扩展功能。
