购物车

最新推荐文章于 2021-03-19 02:49:24 发布
最新推荐文章于 2021-03-19 02:49:24 发布
阅读量60 收藏
点赞数
分类专栏： vue 案例
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_49893750/article/details/109495228
版权
案例 同时被 2 个专栏收录
45 篇文章 0 订阅
订阅专栏
vue
6 篇文章 0 订阅
订阅专栏 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet"  href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/css/bootstrap.min.css"/>
    <script src="./js/vue.js"></script>
</head>
<body>
    <div  id="app">
        <table class="table">
            <thead class="thead-dark">
              <tr>
                <th scope="col">
                    全选
                  <input type="checkbox" @click="allcheck" v-model="allchecked"/>
                  <!-- <img v-show="" />
                  <img  v-show="!" /> -->
                </th>
                <th scope="col">商品</th>
                <th scope="col">单价</th>
                <th scope="col">数量</th>
                <th scope="col">小计</th>
                <th scope="col">操作</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(item,index) in cartarr"  :key="item.id">
                <th scope="row">
                    <!-- 单选 -->
                    <input type="checkbox" v-model="item.check" @click="onecheck(index)"  />
                </th>
                <td>{{item.proname}}</td>
                <td>{{item.price}}</td>
                <td>
                    <button type="button" class="btn btn-primary" @click="plus(index)">+</button>
                      {{item.num}}
                    <button type="button" class="btn btn-primary" @click="reduce(index)">-</button>
                
                </td>
                <td>{{item.price*item.num}}</td>
                <td>
                    <button type="button" class="btn btn-primary" @click="del(item.id)">删除</button>
                </td>
              </tr>
              <tr>
                  <td colspan="6">总价：{{allsum}}</td>
              </tr>
             
            </tbody>
          </table>


    </div>
</body>
<script>

var app=new Vue({
    el:"#app",   
    data:{   
       cartarr:[
           {id:1,proname:"iphone11",price:5600,num:1,check:false},
           {id:2,proname:"vivo",price:7800,num:1,check:false},
           {id:3,proname:"华为",price:9400,num:1,check:false},
           {id:4,proname:"oppo",price:4500,num:1,check:false}
       ],
       allchecked:false
    //    allsum:0
    },
    computed:{
        allsum(){  //总价   依赖属性  this.cartarr
            var sum=0;
            this.cartarr.forEach(item=>{
                 if(item.check){
                    sum += item.price*item.num
                 }
             }) 
             return sum;
        }
    },
    methods:{
        allcheck(){   //全选
        //    1自身的值发生改变
              this.allchecked=!this.allchecked; 
            //   console.log(this.allchecked)
        //    2  让所有的产品全选或者不选
             this.cartarr.forEach(item=>{
                 item.check=this.allchecked;
             })
            //  3:总价
            //  this.cartarr.forEach(item=>{
            //      this.allsum+=item.price*item.num
            //  })
        },
        onecheck(ind){  //单选
            //  1自身的值发生改变
            this.cartarr[ind].check=!this.cartarr[ind].check;
            //    2判断其他所有的产品是否全部选中  只要有一个不选中就不全选就不选
                //  开闭原则
            //    var flag=true;
            //    this.cartarr.forEach(item=>{
            //        if(!item.check){
            //            flag=false;
            //        }
            //    })
            //    this.allchecked=flag;

            this.allchecked=this.cartarr.every(item=>{
                return item.check;
            })

            //    some   find   findIndex   filter
        },
        plus(ind){  //数量加
           this.cartarr[ind].num++;
        },
        reduce(ind){
            this.cartarr[ind].num--;
            if(this.cartarr[ind].num<=1){
                this.cartarr[ind].num=1;
            }
        },
        del(id){  //删除
            // this.cartarr.splice(ind,1);
            //  根据id去数组中找到该id对应的数据的下标 找到返回该条数据的下标 ，找不到返回-1
            var index=this.cartarr.findIndex(item=>{
                return item.id==id
            })
            // console.log(index)
            this.cartarr.splice(index,1)

            // var obj=this.cartarr.find(item=>{
            //     return item.id==id
            // })
            // console.log(obj)
        }
    }
})

</script>
</html>

 

吴机智
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
微信小程序 在tabBar某一项的右上角添加文本（购物车数量）
憨虫子的博客
05-20 7257
首先我们在进入小程序后，肯定是通过用户授权并获取到用户的openID的，或者说至少有那么一个用户信息字段（比如在数据库中的用户表里，有openID、ID等）是跟购物车挂钩的，否则怎么能知道是我的购物车里有什么宝贝呢？在这里我是将用户表中的ID字段返回作为用户的唯一标识存储在globalData.userInfo中的。 在用户将商品添加到购物车后，数据库中的购物车表（cart表）主要存储了三个信息...
学习——购物车设计
calm_encode的博客
08-14 1614
一 概述 对于电商类产品，购物车这个功能是必备的功能，它可以说是电商类产品设计的标配功能。作为平台交易转化最重要的环节之一，每一个细节的调整可能都会带来数据的波动。因此更需要我们对其有深入的思考、小心的求证。 二 购物车的产品结构 三 购物车的业务逻辑 1. 购物车解决什么问题 在前面 Pattern 划分的时候，购物车被归入到了业务类型。也就是说它的设计是分层的，除了基础（default）的设计之外，我们还需要叠加上一层业务的特性，它最终的呈现也与业务有着很强...
购物车_购物车_
10-03
在IT行业中，购物车功能是电子商务网站不可或缺的一部分。在C#编程语言中，实现购物车功能通常涉及到ASP.NET框架，这是一个用于构建Web应用程序的强大工具。本文将深入探讨如何使用C#和ASP.NET来创建一个简单的...
购物车系统
07-20
购物车系统是电子商务网站或应用程序的核心组成部分，它允许用户选择并临时存储他们想要购买的商品，以便于一次性结算。在这个系统中，用户可以添加、删除商品，调整数量，并且可以看到商品的总价。以下是对购物车...
JavaWeb 购物车系统
06-12
【JavaWeb购物车系统】是一种基于JavaWeb技术开发的电子商务应用程序，主要目的是为用户提供一个方便、易用的在线购物平台。这个系统的核心功能是实现购物车的管理，包括添加商品、删除商品、调整商品数量以及结算等...
一个简单的当当网购物车页面，可以实现简单购物
05-29
【标题】：“一个简单的当当网购物车页面”是指一种基于网页技术实现的模拟当当网购物车功能的示例项目。这个项目旨在帮助初学者理解购物车逻辑以及相关前端和后端技术的运用。 【描述】：这个简单购物车页面能够...
购物车项目
10-20
完整的购物车后台管理系统,可以实现购物车的增删改查...
切换图片（箭头）
m0_49893750的博客
09-10 1040
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{ ...
面向对象 tab栏切换 案例
m0_49893750的博客
03-19 590
功能： 点击 tab栏,可以切换效果. 点击 + 号, 可以添加 tab 项和内容项. 点击 x 号, 可以删除当前的tab项和内容项. 双击tab项文字或者内容项文字,可以修改里面的文字内容. html部分 <body> <main> <h4> Js 面向对象 动态添加标签页 </h4> <div class="tabsbox" id="tab"> .
点击按钮修改样式
m0_49893750的博客
09-10 391
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <style> * { ...
切换图片（箭头+圆点）
m0_49893750的博客
09-10 286
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { ...
scroll回到顶部
m0_49893750的博客
09-10 241
<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> button{ display: none; .
发送验证码按钮
m0_49893750的博客
09-10 238
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <style> div { ...
加减按钮改变字体大小
m0_49893750的博客
09-10 235
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> p{ ...
切换图片（圆点）
m0_49893750的博客
09-10 227
<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; ...
点击按钮改变样式
m0_49893750的博客
09-10 221
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { ...
javaweb购物车
最新发布
09-19
javaweb购物车通常由前端页面和后端逻辑组成。前端页面用于展示商品信息和用户操作，后端逻辑则负责处理用户的购物车操作和计算总价。 1. 首先，在后端需要创建一个购物车实体类，例如CarItem.java，用于存储每一项...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值