vue实现商品布局
Vue 实现商品布局
使用 Vue 实现商品布局通常涉及数据绑定、组件化和响应式设计。以下是几种常见的实现方式：
使用 v-for 循环渲染商品列表
通过 Vue 的 v-for 指令动态渲染商品数据，结合 CSS Grid 或 Flexbox 实现布局。
<template>
<div class="product-grid">
<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.price }}</p>
</div>
</div>
</template>
<script>
export default {
data() {
return {
products: [
{ id: 1, name: '商品1', price: '￥100', image: 'image1.jpg' },
{ id: 2, name: '商品2', price: '￥200', image: 'image2.jpg' }
]
}
}
}
</script>
<style>
.product-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 20px;
}
.product-item {
border: 1px solid #ddd;
padding: 10px;
text-align: center;
}
</style>使用组件化拆分
将商品项封装为独立组件，提高代码复用性。
<template>
<div class="product-grid">
<ProductItem
v-for="product in products"
:key="product.id"
:product="product"
/>
</div>
</template>
<script>
import ProductItem from './ProductItem.vue'
export default {
components: { ProductItem },
data() {
return {
products: [
{ id: 1, name: '商品1', price: '￥100', image: 'image1.jpg' },
{ id: 2, name: '商品2', price: '￥200', image: 'image2.jpg' }
]
}
}
}
</script>响应式布局
通过媒体查询或 Vue 的响应式特性实现不同屏幕尺寸下的布局适配。
.product-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
@media (min-width: 768px) {
.product-grid {
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
}使用第三方库
借助 Vue 生态中的 UI 库（如 Element UI、Vuetify）快速实现商品布局。
<template>
<el-row :gutter="20">
<el-col v-for="product in products" :key="product.id" :xs="12" :sm="8" :md="6">
<el-card :body-style="{ padding: '0px' }">
<img :src="product.image" class="image">
<div style="padding: 14px;">
<span>{{ product.name }}</span>
<div class="bottom">
<span class="price">{{ product.price }}</span>
</div>
</div>
</el-card>
</el-col>
</el-row>
</template>动态加载更多商品
结合分页或无限滚动实现商品数据的动态加载。
methods: {
loadMore() {
// 模拟异步加载
setTimeout(() => {
this.products.push(...newProducts)
}, 500)
}
}以上方法可根据具体需求组合使用，实现灵活的商品布局方案。
