vue购物车

        大家好，今天给大家带来一个使用vue.js制作的简单的购物车，其中的功能有添加商品，删除单个商品，加减商品数量，清空所有商品以及计算总价格等功能，下面我们看看具体代码：

html：

<div class="goods_center w" id="goods">
            <table>
                <thead>
                    <tr>
                        <th><input id="all" type="checkbox" @click="allClick()">全选</th>
                        <th>商品图片</th>
                        <th>商品名称</th>
                        <th>商品价格</th>
                        <th>商品数量</th>
                        <th>删除</th>
                        <th>备注</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(item,index) in listGood" :key="index">
                        <td><input type="checkbox" :checked="item.check" @click="select(index)"></td>
                        <td><img :src="item.img" alt=""></td>
                        <td>{{item.goodsName}}</td>
                        <td>￥{{item.goodsPrice}}</td>
                        <td class="yunsuan">
                            <button @click="subs(index)" :disabled="item.goodCount-1<0">-</button>
                            <span>{{item.goodCount}}</span>
                            <button @click = "plus(index)">+</button>
                        </td>
                        <td @click="deletes(index)"class="del">×</td>
                        <td></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td></td>
                        <td colspan="2">合计：</td>
                        <td style="font-size: 25px;color: #f30213;">￥&nbsp;&nbsp;&nbsp;{{getAllPrice}}</td>
                        <td><button class="btns_tab" @click="allNull()">清空所有商品</button></td>
                        <td><button class="btns_tab" @click="payPrice()">付款</button></td>
                    </tr>
                </tbody>
            </table>
            <div class="shanChuXian">
                <hr>
                <h2>买购物车中商品的人还买了</h2>
            </div>
            
            <ul>
                <li v-for="(item,index) in msg" :key="item.id">
                    <div class="goods_center_img">
                        <img :src="item.img" alt="">
                    </div>
                    <p>{{item.goodsName}}</p>
                    <p style="color: red;">{{item.goodsPrice}}元</p>
                    <span>
                        {{item.goodsPL}}
                        <button @click="addGoods(index)">加入购物车</button>
                    </span>
                    
                </li>
            </ul>
        </div>

js：

new Vue({
    el:'#goods',
    data:{
        msg:[
\\商品信息
            {
                id:01,
                img:"./img/goods/good1.webp",
                goodsName:"小米耳机 黑色",
                goodsPrice:150,
                goodsPL:"评论",
                goodCount:0,
                check: true
            },
            {
                id:02,
                img:"./img/goods/good2.webp",
                goodsName:"小米手环",
                goodsPrice:1000,
                goodsPL:"评论",
                goodCount:0,
                check:false
            },
            {
                id:03,
                img:"./img/goods/good3.webp",
                goodsName:"小米智能手表",
                goodsPrice:1500,
                goodsPL:"评论",
                goodCount:0,
                check:false
            },
            {
                id:04,
                img:"./img/goods/good4.webp",
                goodsName:"小米电子手表",
                goodsPrice:900,
                goodsPL:"评论",
                goodCount:0,
                check:false
            },
            {
                id:05,
                img:"./img/goods/good5.webp",
                goodsName:"小米电视 15寸",
                goodsPrice:2500,
                goodsPL:"评论",
                goodCount:0,
                check:false
            },
            {
                id:06,
                img:"./img/goods/good6.webp",
                goodsName:"小米耳机 白色",
                goodsPrice:250,
                goodsPL:"评论",
                goodCount:0,
                check:false
            },
            {
                id:07,
                img:"./img/goods/good7.jpg",
                goodsName:"充电宝无线充电器",
                goodsPrice:100,
                goodsPL:"评论",
                goodCount:0,
                check:false
            },
            {
                id:08,
                img:"./img/goods/good8.jpg",
                goodsName:"充电宝",
                goodsPrice:149,
                goodsPL:"评论",
                goodCount:0,
                check:false
            },
            {
                id:09,
                img:"./img/goods/good9.webp",
                goodsName:"小米电视  19寸",
                goodsPrice:4500,
                goodsPL:"评论",
                goodCount:0,
                check:false
            },
            {
                id:10,
                img:"./img/goods/good10.webp",
                goodsName:"小米电视 18寸",
                goodsPrice:3500,
                goodsPL:"评论",
                goodCount:0,
                check:false
            }
        ],
        listGood:[],
    },

    methods: {
        // 添加商品
        addGoods(index){
            let obj = {};
            obj = this.msg[index];
            // this.listGood.push(obj);
            const isAdded = this.listGood.find(item => item.id === obj.id);
            if(isAdded){
                isAdded.goodCount++;
           }else{
                this.listGood.push(obj);
           }
             
        },
        // 删除
        deletes(index){
            if(confirm('你确认删除这件商品吗?')){
                this.listGood[index].goodCount=0;
                this.listGood.splice(index,1);
            }
        },

        // 减法
        subs(index){
            this.listGood[index].goodCount--;
            
        },
        plus(index){
            this.listGood[index].goodCount++;
            
        },
        allClick(){
            // 首先，获取到全选按钮，赋给变量isAll
            let isAll = document.getElementById('all');
            // 如果全选按钮被选中，单选按钮就全部选中  == >  list数组的check属性变为true
            if(isAll.checked == true){
                this.listGood.forEach(function(item,index){
                    item.check = true;
                    // this.allPrice += this.listGood[i].goodsPrice * this.listGood[i].goodCount;
                })
            }else{
                this.listGood.forEach(function(item,index){
                    item.check = false;
                })
            }
        },
        // 单选按钮
        select(index){
            this.listGood[index].check = !this.listGood[index].check;
            let isAll = document.getElementById('all');
            let n = 0;
            for (var i = 0; i<this.listGood.length;i++){
                if(this.listGood[i].check == true){
                    n++
                }
            }
            if( n == this.listGood.length){
                isAll.checked = true;
            }else{
                isAll.checked = false;
            }
        },
    //    清空所有商品
        allNull(){
            if(this.listGood.length>0){
                // console.log(this.listGood.length);
                var num=0;
                for(var i = 0 ;i<this.listGood.length;i++){
                    num++;
                    this.listGood[i].goodCount = 0;
                    // console.log("i"+i);
                    // console.log(this.listGood[i]);
                }
                this.listGood.splice(0,num);
            }else{
                alert("您的购物车内暂时没有商品");
            }
        },
        // 付款
        payPrice(){
            if(this.listGood.length>0){
                confirm("您共购买了"+this.getAllCount+"件商品，共计：￥"+this.getAllPrice+"\n您确定购买吗？")
            }else{
                alert("请您选购商品！！");
            }
            
        }


        
    },
    computed:{
        getAllPrice(){
            // 获取listGood中Check为true的数据
            //  filter()创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
            // filter() 方法用于把Array中的某些元素过滤掉，然后返回剩下的未被过滤掉的元素。
            //   注意事项：
            //     1、filter() 不会对空数组进行检测；
            //     2、filter() 不会改变原始数组。

            let listsCheck=this.listGood.filter(function (val){
                return val.check===true;
            })

            //总价
            let totalPrice=0;
            for (let i = 0; i < listsCheck.length; i++) {  //循环获取listGood中check为true的数据
                totalPrice+=listsCheck[i].goodCount*listsCheck[i].goodsPrice//将对应check为true的数量与价格相乘得出总价
            }

            return totalPrice;
        },
        getAllCount(){
            let totalCount = 0;
            for(var i = 0 ;i<this.listGood.length;i++){
                totalCount += this.listGood[i].goodCount;
            }
            return totalCount;
        }

    }
    
})

运行视频我已经发布到博客上了（https://live.csdn.net/v/299718），希望对大家有所帮助，