VUE小demo -购物车

sam80000

已于 2022-04-19 15:17:51 修改

阅读量583

点赞数

文章标签： vue.js javascript

于 2022-03-21 22:26:40 首次发布

本文链接：https://blog.csdn.net/sam80000/article/details/123647800

版权

前端练习专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一、思路

1.创建数组对象，用来存放添加到购物车的商品。再创建一个数组用来存放勾选的商品对象。
2.用v-for循环遍历添加到购物车的商品来显示，用v-model绑定多选框，将勾选的数据存入数组。
3.求和：对勾选的数组进行遍历，把价格和数量计算综合
4.全选和全不选：当勾选全选的时候，让勾选的数组对象等于购物车的商品对象。
5.根据勾选全部商品，判断全选：当勾选全部商品后，判断勾选数组长度和购物车数组长度，且不为零，对全选和全不选操作。点击删除按钮，还要进行此判断，防止删除后两个数组不同，但却全选。
6.删除购物车商品：点击删除，使用数组下标进行位置删除。把删除的数据筛选出来，没删除的赋值给购物车数组，进行购物车更新。点击删除。购物车变换，执行判断全选和全不选。

二、代码

<!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">
    <title>Document</title>
    <script src="../lib/vue.global.js"></script>
    <style type="text/css">
        img{
            width: 100px;
            height: 100px;
        }
        li{
            display: flex;
            justify-content: space-around;
            padding: 10px;
        }
    </style>
</head>
<body>
    <!-- 布局 -->
    <div id="box">
        <ul>
              <!-- 全选和全不选 -->
            <input type="checkbox" v-model="ischeck" @change="handleAll" />全选
            <span v-if="dataList.length==0">添加您的购物车</span>
            <li v-for="(item,index) in dataList" :key="item.id">
                
              
                <!-- 多选绑定变量，vlaue值需要绑定，普通的选择value值不需要绑定 -->
                <input type="checkbox" v-model="choose" :value="item" @change="handleItem"/>
                <img :src="item.pic"/>

                <div>
                    {{item.name}}  
                    <span style="color:red">￥{{item.price}}</span>
                  
                </div>

                <div >
                    <button type="button" @click="item.number--" :disabled="item.number==1">-</button>
                    {{item.number}}
                    <button type="button" @click="item.number++" :disabled="item.number==item.limit">+</button>
                    <button type="button" @click="handleD(index,item.id)">删除</button>
                </div>

              
            </li>
        </ul>
        <div >
            总金额：{{sum()}}
            
        </div>
    </div>

    <!-- 逻辑 -->
    <script type="text/javascript">
        
        var obj={
            data(){
                return{
                    dataList:[
                        {
                            name:"商品1",
                            price:10,
                            number:1,
                            id:1,
                            limit:5,//限购数量
                            pic:"http://img.daimg.com/uploads/allimg/220224/3-2202241Q324.jpg"
                        },
                        {
                            name:"商品2",
                            price:20,
                            number:1,
                            id:2,
                            limit:10,//限购数量
                            pic:"http://img.daimg.com/uploads/allimg/220224/3-2202241Q324.jpg"
                        },
                        {
                            name:"商品3",
                            price:10,
                            number:1,
                            id:3,
                            limit:2,//限购数量
                            pic:"http://img.daimg.com/uploads/allimg/220224/3-2202241Q324.jpg"
                        }
                    ],

                    choose:[],   //勾选的数据
                    ischeck:false
                }
            },
            methods:{
                sum(){
                    var total=0;
                    this.choose.forEach(item => {
                        total+=(item.price*item.number)
                    });
                    return total;
                },

                handleD(index,id){
                    //点击删除，删除dataList的数据，
                    this.dataList.splice(index,1);
                    
                    //移除选中的数据.把不是这个id的元素移除筛选出来，放入原来的数组
                    this.choose=this.choose.filter(item=>item.id!=id)

                    //删除后判断全选
                    this.handleItem();
                },

                //全选判断
                handleAll(){
                    if(this.ischeck){
                        
                        this.choose=this.dataList
                    }else{
                        this.choose=[]
                       
                    }
                },

                //单个选择商品和全选判断
                handleItem(){
                    if(this.choose.length===this.dataList.length&&this.choose.length!=0){
                        this.ischeck=true
                    }else{
                        this.ischeck=false
                    }
                }
            }
        }

      var vm=  Vue.createApp(obj).mount("#box")
    </script>
</body>
</html>

sam80000

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
VUE小demo -购物车

一、思路1.创建数组对象，用来存放添加到购物车的商品。再创建一个数组用来存放勾选的商品对象。2.用v-for循环遍历添加到购物车的商品来显示，用v-model绑定多选框，将勾选的数据存入数组。3.求和：对勾选的数组进行遍历，把价格和数量计算综合4.全选和全不选：当勾选全选的时候，让勾选的数组对象等于购物车的商品对象。5.根据勾选全部商品，判断全选：当勾选全部商品后，判断勾选数组长度和购物车数组长度，且不为零，对全选和全不选操作。点击删除按钮，还要进行此判断，防止删除后两个数组不同，但却全选。6.
复制链接

扫一扫

专栏目录