vue实现商品布局
使用 Vue 实现商品布局
数据准备
商品数据通常存储在数组中，每个商品对象包含名称、价格、图片等属性。示例数据结构如下：
data() {
return {
products: [
{ id: 1, name: '商品A', price: 100, image: 'image1.jpg' },
{ id: 2, name: '商品B', price: 200, image: 'image2.jpg' },
// 更多商品...
]
}
}网格布局实现
使用 CSS Grid 或 Flexbox 实现商品网格排列。以下是 Flexbox 示例：
<div class="product-grid">
<div v-for="product in products" :key="product.id" class="product-card">
<img :src="product.image" :alt="product.name">
<h3>{{ product.name }}</h3>
<p>价格: {{ product.price }}元</p>
</div>
</div>.product-grid {
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.product-card {
width: calc(33.333% - 20px);
border: 1px solid #ddd;
padding: 15px;
box-sizing: border-box;
}响应式设计
通过媒体查询实现不同屏幕尺寸下的布局调整：
@media (max-width: 768px) {
.product-card {
width: calc(50% - 20px);
}
}
@media (max-width: 480px) {
.product-card {
width: 100%;
}
}商品卡片组件化
将商品卡片封装为可复用组件：
<!-- ProductCard.vue -->
<template>
<div class="product-card">
<img :src="product.image" :alt="product.name">
<h3>{{ product.name }}</h3>
<p>价格: {{ product.price }}元</p>
<button @click="$emit('add-to-cart', product)">加入购物车</button>
</div>
</template>
<script>
export default {
props: ['product']
}
</script>分页功能
结合分页组件实现商品分页展示：
<product-card
v-for="product in paginatedProducts"
:key="product.id"
:product="product"
@add-to-cart="handleAddToCart"
/>
<pagination
:total-items="products.length"
:items-per-page="perPage"
@page-changed="handlePageChange"
/>筛选和排序
添加筛选和排序功能增强用户体验：
computed: {
filteredProducts() {
return this.products.filter(product =>
product.name.includes(this.searchQuery)
)
},
sortedProducts() {
return [...this.filteredProducts].sort((a, b) => {
return this.sortBy === 'price' ? a.price - b.price : 0
})
}
}动画效果
使用 Vue 过渡效果增强交互体验：
<transition-group name="fade" tag="div" class="product-grid">
<product-card
v-for="product in products"
:key="product.id"
:product="product"
/>
</transition-group>.fade-enter-active, .fade-leave-active {
transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
opacity: 0;
}
