vue案例-从0实现购物车

前言

我们都很熟悉商品购物车功能，每次在某宝某东等平台购物时，喜欢的商品会被加入购物车，最终统一结算。购物车的这一功能让消费者能够轻松管理商品，包括添加、删除商品，以及选择特定的商品进行结算。随着操作的变化，购物车中的商品总价也会实时更新，从而帮助消费者更好地控制和查看购买清单。

购物车项目是一个理想的Vue练手项目，因为它结合了实际应用场景和多种开发任务。实现购物车功能涉及数据绑定、组件化、计算属性和状态管理等Vue核心特性，能够帮助开发者掌握前端开发的关键技能。项目的适度复杂性允许从简单到复杂逐步提升能力，同时涉及用户交互、API集成和界面设计等多个方面，提供了全面的实践经验。

基本功能实现

1. 添加商品到购物车
2. 动态更新购物车中商品的数量
3. 动态更新结算价格
4. 移除商品在购物车

实现截图

内容介绍

商品列表

在商品列表中，我们展示了几款不同的手机，包括小米手机、华为手机和苹果手机。每个商品条目显示了商品的图片、名称和价格。每个商品旁边有一个按钮，用于添加商品到购物车或调整购物车中的商品数量。

• 添加到购物车：如果商品当前不在购物车中，点击“添加到购物车”按钮会将商品加入购物车，并将商品数量设置为 1。
• 调整数量：如果商品已经在购物车中，按钮将变为加号（+）和减号（-）。用户可以通过点击这些按钮来增加或减少购物车中的商品数量。

购物车

购物车展示了当前选中的商品。它包括以下几个部分：

• 序号：每个购物车项的序号，从 0 开始。
• 名称：商品名称。
• 图片：商品图片。
• 数量：购物车中该商品的数量。
• 价格：该商品的总价（数量 × 单价）。

购物车只显示那些已添加到购物车的商品。通过 cartList 计算属性，购物车会自动从商品列表中过滤出数量大于零的商品。

总计

购物车底部显示了所有商品的总价格。总价是通过计算购物车中所有商品的总价得出的，显示为“总计”后跟随总金额。

代码实现

<script setup>

import {computed, reactive} from 'vue'

const goodsList = reactive(

[

{title:'小米手机',price:2000,count:0,img:'src/assets/1.png'},

{title:'华为手机',price:4000,count:0,img:'src/assets/2.png'},

{title:'苹果手机',price:6000,count:0,img:'src/assets/3.png'},

]

)

const handleGoods = (index) => {

console.log(goodsList[index])

goodsList[index].count += 1;

}

const handleSub = (index) =>{

goodsList[index].count -= 1;

}

const total = computed(() => {

let sum = 0;

goodsList.map((item) => {

sum += item.price * item.count

})

return sum

})

const cartList =computed(() => {

return goodsList.filter((item) => !!item.count)

})

</script>

  

<template>

<div class="goods">

<ul class="list">

<li v-for="item,index in goodsList">

<img :src="item.img" alt="">

<div class="title">{{ item.title }}</div>

<div class="price">价格: {{item.price}}元</div>

<div class="btn-box">

<div class="btn" @click="handleGoods(index)" v-if="!item.count">

添加到购物车

</div>

<div class="btn-box" v-else>

<div class="btn" @click="handleSub(index)">-</div>

<div>{{ item.count }}</div>

<div class="btn" @click="handleGoods(index)">+</div>

</div>

</div>

</li>

</ul>

</div>

<div class="cart">

<ul class="list-header">

<li>序号</li>

<li>名称</li>

<li>图片</li>

<li>数量</li>

<li>价格</li>

</ul>

<ul class="list-body">

<li v-for="(item,index) in cartList">

<div> {{ index }}</div>

<div> {{ item.title}}</div>

<div> <img :src="item.img" alt=""></div>

<div> {{ item.count}}</div>

<div> {{ item.count * item.price}}</div>

</li>

</ul>

</div>

<div class="total">总计<span>${{ total }}</span></div>

</template>

  

<style scoped>

.btn{

text-align:center;

width:200px;

background-color: #4897dd;

border-radius: 8px;

height:32px;

line-height:32px;

color:#fff;

cursor:pointer;

}

  

.goods .list {

display:flex;

}

.goods .list li {

width:220px;

padding:12px;

border: 1px solid #ebebeb;

border-radius: 16px;

margin-right:12px;

}

.goods .list li .title{

font-size: 24px;

}

.goods .list li .price{

font-size:20px;

margin-bottom:8px;

}

.goods .list li img{

width:220px;

height: 220px;

}

.goods .list li .btn-box{

display:flex;

}

.goods .list li .btn-box .btn {

width:40px;

}

.goods .list li .btn-box > div{

flex:1;

text-align: center;

line-height:32px;

}

.cart .list-header{

display:flex;

}

.cart .list-body li{

display:flex;

}

  

.cart .list-header li {

flex: 1;

}

.cart .list-body li > div{

height:60px;

line-height:60px;

flex:1;

}

  

.cart .list-body li > div img{

width:45px;

height:45px;

}

.total {

text-align:right;

margin-top: 20px;

}

</style>

如果本篇文章对你有所帮助的话就点个关注吧💗💗