vue2-02-水果购物车案例

已于 2024-05-25 22:09:08 修改
阅读量1.2k 收藏 31
点赞数 21
文章标签： 前端 vue
于 2024-05-12 18:20:24 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_64150479/article/details/138756438
版权

目录

功能

  1. 可以修改某一水果的购买数量（最小为1，最大不封顶）
  2. 动态计算某一水果的购物小计（小计 = 单价 * 个数）（随着个数的修改，小计也发生变化）
  3. 当每项水果都被选中则全选按钮也会被选中，一旦有一项水果没有被选中，全选按钮就不会被选中，点击全选按钮，则水果全部被选中，取消全选按钮，则所有水果都取消选中
  4. 被选中的那一栏背景颜色会发生改变（变灰）
  5. 动态统计选中的总价和总数量（如果该水果的复选框未被选中，则总价和总数量中不会统计它）
  6. 可以在购物车中删除水果，如果删除的水果是被选中的状态，则总价和总数量也会相应发生改变
  7. 当把购物车中所有水果删除，会显示空空如也的页面
  8. 购物情况可以持久化到本地（本地存储，刷新页面购物情况也不会消失）

运行截图

截图一

在这里插入图片描述

截图二

在这里插入图片描述

截图三

在这里插入图片描述
截图四：当把购物车所有水果删除后

在这里插入图片描述

截图五

在这里插入图片描述

代码

css部分

fruit.css

.app-container {
  padding-bottom: 300px;
  width: 800px;
  margin: 0 auto;
}
@media screen and (max-width: 800px) {
  .app-container {
    width: 600px;
  }
}
.app-container .banner-box {
  border-radius: 20px;
  overflow: hidden;
  margin-bottom: 10px;
}
.app-container .banner-box img {
  width: 100%;
}
.app-container .nav-box {
  background: #ddedec;
  height: 60px;
  border-radius: 10px;
  padding-left: 20px;
  display: flex;
  align-items: center;
}
.app-container .nav-box .my-nav {
  display: inline-block;
  background: #5fca71;
  border-radius: 5px;
  width: 90px;
  height: 35px;
  color: white;
  text-align: center;
  line-height: 35px;
  margin-right: 10px;
}

.breadcrumb {
  font-size: 16px;
  color: gray;
}
.table {
  width: 100%;
  text-align: left;
  border-radius: 2px 2px 0 0;
  border-collapse: separate;
  border-spacing: 0;
}
.th {
  color: rgba(0, 0, 0, 0.85);
  font-weight: 500;
  text-align: left;
  background: #fafafa;
  border-bottom: 1px solid #f0f0f0;
  transition: background 0.3s ease;
}
.th.num-th {
  flex: 1.5;
}
.th {
  text-align: center;
}
.th:nth-child(4),
.th:nth-child(5),
.th:nth-child(6),
.th:nth-child(7) {
  text-align: center;
}
.th.th-pic {
  flex: 1.3;
}
.th:nth-child(6) {
  flex: 1.3;
}

.th,
.td {
  position: relative;
  padding: 16px 16px;
  overflow-wrap: break-word;
  flex: 1;
}
.pick-td {
  font-size: 14px;
}
.main,
.empty {
  border: 1px solid #f0f0f0;
  margin-top: 10px;
}
.tr {
  display: flex;
  cursor: pointer;
  border-bottom: 1px solid #ebeef5;
}
.tr.active {
  background-color: #f5f7fa;
}
.td {
  display: flex;
  justify-content: center;
  align-items: center;
}

.table img {
  width: 100px;
  height: 100px;
}

button {
  outline: 0;
  box-shadow: none;
  color: #fff;
  background: #d9363e;
  border-color: #d9363e;
  color: #fff;
  background: #d9363e;
  border-color: #d9363e;
  line-height: 1.5715;
  position: relative;
  display: inline-block;
  font-weight: 400;
  white-space: nowrap;
  text-align: center;
  background-image: none;
  border: 1px solid transparent;
  box-shadow: 0 2px 0 rgb(0 0 0 / 2%);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  touch-action: manipulation;
  height: 32px;
  padding: 4px 15px;
  font-size: 14px;
  border-radius: 2px;
}
button.pay {
  background-color: #3f85ed;
  margin-left: 20px;
}

.bottom {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-right: 20px;
  border: 1px solid #f0f0f0;
  border-top: none;
  padding-left: 20px;
}
.right-box {
  display: flex;
  align-items: center;
}
.check-all {
  cursor: pointer;
}
.price {
  color: hotpink;
  font-size: 30px;
  font-weight: 700;
}
.price-box {
  display: flex;
  align-items: center;
}
.empty {
  padding: 20px;
  text-align: center;
  font-size: 30px;
  color: #909399;
}
.my-input-number {
  display: flex;
}
.my-input-number button {
  height: 40px;
  color: #333;
  border: 1px solid #dcdfe6;
  background-color: #f5f7fa;
}
.my-input-number button:disabled {
  cursor: not-allowed!important;
}
.my-input-number .my-input__inner {
  height: 40px;
  width: 50px;
  padding: 0;
  border: none;
  border-top: 1px solid #dcdfe6;
  border-bottom: 1px solid #dcdfe6;
}

inputnumber.css

.my-input-number {
  position: relative;
  display: inline-block;
  width: 140px;
  line-height: 38px;
}
.my-input-number span {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}
.my-input-number .my-input {
  display: block;
  position: relative;
  font-size: 14px;
  width: 100%;
}
.my-input-number .my-input__inner {
  -webkit-appearance: none;
  background-color: #fff;
  background-image: none;
  border-radius: 4px;
  border: 1px solid #dcdfe6;
  box-sizing: border-box;
  color: #606266;
  display: inline-block;
  font-size: inherit;
  height: 40px;
  line-height: 40px;
  outline: none;
  padding: 0 15px;
  transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  width: 100%;
  padding-left: 50px;
  padding-right: 50px;
  text-align: center;
}
.my-input-number .my-input-number__decrease,
.my-input-number .my-input-number__increase {
  position: absolute;
  z-index: 1;
  top: 1px;
  width: 40px;
  height: auto;
  text-align: center;
  background: #f5f7fa;
  color: #606266;
  cursor: pointer;
  font-size: 13px;
}
.my-input-number .my-input-number__decrease {
  left: 1px;
  border-radius: 4px 0 0 4px;
  border-right: 1px solid #dcdfe6;
}
.my-input-number .my-input-number__increase {
  right: 1px;
  border-radius: 0 4px 4px 0;
  border-left: 1px solid #dcdfe6;
}
.my-input-number .my-input-number__decrease.is-disabled,
.my-input-number .my-input-number__increase.is-disabled {
  color: #c0c4cc;
  cursor: not-allowed;
}

html + vue2部分

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="./css/inputnumber.css" />
  <link rel="stylesheet" href="./css/fruit.css" />
  <title>购物车</title>
</head>

<body>
  <div class="app-container" id="app">
    <!-- 顶部banner -->
    <div class="banner-box"><img src="./img/fruit.jpg" alt="" /></div>

    <!-- 面包屑 -->
    <div class="breadcrumb">
      <span>🏠</span>
      /
      <span>购物车</span>
    </div>

    <!-- 购物车主体 -->
    <div class="main" v-if="fruitList.length > 0">
      <div class="table">
        <!-- 头部 -->
        <div class="thead">
          <div class="tr">
            <div class="th">选中</div>
            <div class="th th-pic">图片</div>
            <div class="th">单价</div>
            <div class="th num-th">个数</div>
            <div class="th">小计</div>
            <div class="th">操作</div>
          </div>
        </div>
        <!-- 身体 -->
        <div class="tbody">
          <div class="tr" :class="{active: item.isChecked}" v-for="(item, index) in fruitList" :key="item.id">
            <div class="td"><input type="checkbox" v-model="item.isChecked" /></div>
            <div class="td"><img :src="item.icon" alt="" /></div>
            <div class="td">{{ item.price }}</div>
            <div class="td">
              <div class="my-input-number">
                <button class="decrease" @click="sub(item.id, item.num)" :disabled="item.num <= 1"> - </button>
                <span class="my-input__inner">{{ item.num }}</span>
                <button class="increase" @click="add(item.id, item.num)"> + </button>
              </div>
            </div>
            <div class="td">{{ item.num * item.price }}</div>
            <div class="td"><button @click="del(item.id)">删除</button></div>
          </div>
        </div>
      </div>
      <!-- 底部 -->
      <div class="bottom">
        <!-- 全选 -->
        <label class="check-all">
          <input v-model="isCheckedAll" type="checkbox" />
          全选
        </label>
        <div class="right-box">
          <!-- 所有商品总价 -->
          <span class="price-box">总价&nbsp;&nbsp;:&nbsp;&nbsp;¥&nbsp;<span class="price">{{ totalPrice }}</span></span>
          <!-- 结算按钮 -->
          <button class="pay">结算( {{ totalCount }} )</button>
        </div>
      </div>
    </div>

    <!-- 空车 -->
    <div class="empty" v-else>🛒空空如也</div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
  <script>
    const defaultArr = [
      {
        id: 1,
        icon: './img/火龙果.png',
        isChecked: true,
        num: 2,
        price: 6,
      },
      {
        id: 2,
        icon: './img/荔枝.png',
        isChecked: false,
        num: 7,
        price: 20,
      },
      {
        id: 3,
        icon: './img/榴莲.png',
        isChecked: false,
        num: 3,
        price: 40,
      },
      {
        id: 4,
        icon: './img/鸭梨.png',
        isChecked: true,
        num: 10,
        price: 3,
      },
      {
        id: 5,
        icon: './img/樱桃.png',
        isChecked: false,
        num: 20,
        price: 34,
      }
    ]
    const app = new Vue({
      el: '#app',
      data: {
        // 水果列表
        //   JSON.parse(localStorage.getItem('list'))：这样写是为了打开页面或刷新页面仍显示上一次的购物情况
        //   || defaultArr：||后面跟的是defaultArr,当你删除所有水果并清空本地存储，再次运行代码，网页会显示defaultArr中的数据
        //   你可以试一下下面这个[]代码，用了这个代码如果把购物车中水果全部删除，则以后打开网页就没有任何数据了
        // fruitList: JSON.parse(localStorage.getItem('list')) || []
        fruitList: JSON.parse(localStorage.getItem('list')) || defaultArr
      },
      methods: {
        // del()删除对应购物车物品
        del(id) {
          this.fruitList = this.fruitList.filter(item => item.id !== id)
        },
        // add()增加购物数量
        add(id, num) {
          // 得到id对应的对象fruit
          const fruit = this.fruitList.find(item => item.id === id)
          return fruit.num++
        },
        // sub()减少购物数量
        sub(id, num) {
          // 得到id对应的对象fruit
          const fruit = this.fruitList.find(item => item.id === id)
          return fruit.num--
        }
      },
      computed: {
        // 选中的总价
        totalPrice() {
          // 两种写法：三元运算 和 if...else判断
          // return this.fruitList.reduce((sum, item) => item.isChecked ? sum + item.sum * item.price : sum, 0)
          return this.fruitList.reduce((sum, item) => {
            if (item.isChecked) {
              return sum + item.num * item.price
            } else {
              return sum
            }
          }, 0)
        },
        // 选中的总数量
        totalCount() {
          return this.fruitList.reduce((sum, item) => item.isChecked ? sum + item.num : sum, 0)
        },
        // 计算全选的值（false / true）
        isCheckedAll: {
          // 如果所有复选框被选中，则全选框也要选中
          get() {
            return this.fruitList.every(item => item.isChecked)
          },
          // 同步复选框和全选框的状态
          set(value) {
            this.fruitList.forEach(item => item.isChecked = value)
          }
        }
      },
      watch: {
        fruitList: {
          deep: true,
          handler(newValue) {
            // 需要将变化后的newValue存入本地(转JSON)
            localStorage.setItem('list', JSON.stringify(newValue))
          }
        }
      }
    })
  </script>
</body>

</html>
唐小橘子
关注
Vue2.0购物车简单实例
GOoi的博客
07-13 501
vue2.0实例简单购物车 页面展示效果如下：​ 该购物车实现了自动计算小计、总价，小计与总计金额保留2位数。 代码部分 body代码 <body> <header> <h2>我的购物车</h2> </header> <article id="main"> <div class="all" v-...
VUE2 Day02指令修饰符 计算属性-watch侦听器水果购物车案例
weixin_52284271的博客
12-18 482
指令修饰符，计算属性，水果购物车案例
vue2 -- 购物车小案例
qq_54422936的博客
09-25 503
vue2 -- 购物车小案例
Vue2.0开发购物车实例
大灰狼的小绵羊哥哥的博客
03-04 1342
前言 虽然Vue最强大的是组件化开发，但是其实多页面开发也蛮适合的。看了慕课网的使用Vue2.0开发购物车的教程之后，自己也实现了一遍。http://www.imooc.com/article/16454 初始化package.json 使用npm init命令来自动生成package.json文件。 会依次让你输入: name: 你的项目名称(默认会使用你的文件夹名称，
Vue2.0实现购物车示例
热门推荐
Paranoidyang的博客
06-05 1万+
简介vue.js是由华人尤雨溪开发的一套MVVM框架。vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统，它非常适用于交互处理非常多（如表单操作），而且页面中的内容需要根据用户的操作动态变化的单页应用程序（如博客、知乎这类）。主要特性： 响应式的数据绑定 组件化开发 Virtual DOM 开发准备工具我使用的编辑器是sublime text3，首先要先安装个插
Vue2购物车综合案例
热爱WebGIS的博客
02-18 1091
Vue2购物车综合案例
【Vue2】综合案例 - 购物车
weixin_40874076的博客
05-03 591
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档。
Vue 购物车案例 黑马学院
qq_42316056的博客
11-22 2908
Vue 购物车案例 黑马学院 ，购物车作业，vue2.0作业， v-model 数据双向绑定，axios ，计算属性等等。
vue制作水果购物车
qq_60536024的博客
08-08 1947
vue制作水果购物车
vue购物车案例（源码）
m0_64970691的博客
10-11 5446
基于vue的购物车案例
vue2.0实现购物车小案例
07-11
运用vue2.0实现的购物车demo，供大家共同学习参考,欢迎评论指正。
vue实现购物车案例
10-15
主要介绍了vue实现购物车案例，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue3购物车小案例（vue3选项式的写法）-上
大姐的博客
02-26 383
Vue2是选项式的风格。指的就是vue2的使用方法，因为vue2里使用的都是属性来进行编辑。例如methods、components、data、state、getters等。而vue3的选项式和v2的书写格式很像
vue2实现移动端简单的购物车案例
ovo_Beijo的博客
05-19 1944
vue2实现移动端简单的购物车案例，导入注册使用Header组件，基于axios请求数据列表，循环渲染Goods组件
Vue2.（过滤器，Watch侦听器，计算属性，购物车案例）
切图仔
04-19 915
Vue2.（过滤器，Watch侦听器，计算属性）
Vue2.0 购物车案例
niubiwhat的博客
09-17 971
购物车案例
【VUE】VUE2实现购物车案例-代码分享
qiaomm的个人博客
06-11 557
【代码分享】【VUE】VUE2实现购物车案例。
vue2.0实现经典购物车案例
diejiqiang6279的博客
07-21 1175
前段时间听说一段这样这样的话，如何你要快速在一个行业里习得工作的本领，那你的先掌握该领域最核心的20%的技能，根据二八定理，掌握这20%的技能知识你将可以解决该领域80%的问题。 我们都知道学习vue最经典最有代表性的demo就是购物车。今天终于静下心来和大家分享一下自己写的一个购物车的案例。 1.实现效果图如下所示 页面很简单，所有的功能列和展示都是放在一个简单的tabl...
基于Vue2的购物车
qq_59845463的博客
04-13 468
一个简单的案例
水果购物车案例，vue
最新发布
10-28
水果购物车案例是一个常见的前端开发示例，它通常用于展示Vue.js框架如何处理数据绑定、组件化以及状态管理。在这个场景中，你可以创建一个虚拟的购物车，包含多种水果（如苹果、香蕉、橙子等），每个水果都有名称、...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值