Vue3.0 简单商城—商品列表组件

原文链接：Vue3.0 简单商城—商品列表组件 – 每天进步一点点

 

上一篇文章

已引入了Home组件Vue3.0 简单商城—购物主页组件编写 – 每天进步一点点

已经完成了简单Home组件，Home组件下面有四个子组件，这篇文章介绍一下商品列表组件的具体实现方法。

1.商品列表组件

商品列表通过v-for循环所有的商品，在此处模拟后台请求的数据参考如下：

products: [

{

id:'1001',

name: '草莓',

price: 37,

description: '新鲜的大草莓',

image: 'https://img0.baidu.com/it/u=1884825130,1214737831&fm=253&fmt=auto&app=138&f=JPEG?w=200&h=200'

},

{

id:'1002',

name: '苹果',

price: 15,

description: '新鲜的苹果',

image: 'https://img0.baidu.com/it/u=3289470460,166095271&fm=253&fmt=auto&app=120&f=JPEG?w=183&h=183'

},

{

id:'1003',

name: '西瓜',

price: 30,

description: '新鲜的大西瓜',

image: 'https://img2.baidu.com/it/u=3734188370,3061921446&fm=253&fmt=auto&app=138&f=JPEG?w=200&h=200'

},

{

id:'1004',

name: '香蕉',

price: 8.5,

description: '新鲜的香蕉',

image: 'https://img0.baidu.com/it/u=3106970920,4028332390&fm=253&fmt=auto&app=120&f=JPEG?w=193&h=193'

},

{

id:'1005',

name: '哈密瓜',

price: 17,

description: '新鲜的哈密瓜',

image: 'https://img1.baidu.com/it/u=3415357883,3105635612&fm=253&fmt=auto&app=138&f=JPEG?w=200&h=200'

}

]

我们修改商品列表组件

<template>

<div>

<el-row :gutter="20">

<el-col :span="6" v-for="(product, index) in products" :key="index">

<el-card :body-style="{ padding: '0px' }" class="product-card">

<img :src="product.image" class="image" />

<div style="padding: 14px">

<span>{{ product.name }}</span>

<div class="bottom">

<span class="price">¥{{ product.price }}</span>

<el-button type="text" class="button">查看详情</el-button>

<el-button type="text" class="button">加入购物车</el-button>

</div>

</div>

</el-card>

</el-col>

</el-row>

</div>

</template>

 

<script>

// import homeApi from "../../api/homeApi";

 

export default {

data() {

return {

products: [

{

id:'1001',

name: '草莓',

price: 37,

description: '新鲜的大草莓',

image: 'https://img0.baidu.com/it/u=1884825130,1214737831&fm=253&fmt=auto&app=138&f=JPEG?w=200&h=200'

},

{

id:'1002',

name: '苹果',

price: 15,

description: '新鲜的苹果',

image: 'https://img0.baidu.com/it/u=3289470460,166095271&fm=253&fmt=auto&app=120&f=JPEG?w=183&h=183'

},

{

id:'1003',

name: '西瓜',

price: 30,

description: '新鲜的大西瓜',

image: 'https://img2.baidu.com/it/u=3734188370,3061921446&fm=253&fmt=auto&app=138&f=JPEG?w=200&h=200'

},

{

id:'1004',

name: '香蕉',

price: 8.5,

description: '新鲜的香蕉',

image: 'https://img0.baidu.com/it/u=3106970920,4028332390&fm=253&fmt=auto&app=120&f=JPEG?w=193&h=193'

},

{

id:'1005',

name: '哈密瓜',

price: 17,

description: '新鲜的哈密瓜',

image: 'https://img1.baidu.com/it/u=3415357883,3105635612&fm=253&fmt=auto&app=138&f=JPEG?w=200&h=200'

}

]

};

},

 

methods: {},

 

mounted() {

//homeApi.methods.getWeather(101120201);

 

},

};

</script>

 

<style >

.product-card {

margin-bottom: 20px;

}

 

.image {

width: 100%;

display: block;

}

 

.bottom {

margin-top: 13px;

line-height: 12px;

display: flex;

justify-content: space-between;

align-items: center;

}

 

.price {

font-size: 18px;

color: #f56c6c;

}

 

.button {

padding: 0;

min-height: auto;

}

</style>

效果如下图：