Vue购物车功能计算总价/全选/删除

最新推荐文章于 2024-03-14 16:19:16 发布

拜拜雪公主i

最新推荐文章于 2024-03-14 16:19:16 发布

阅读量4.3k

点赞数 11

CC 4.0 BY-SA版权

分类专栏： web前端文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/xuexiaiwo11/article/details/125217486

web前端专栏收录该内容

2 篇文章

订阅专栏

这篇博客展示了如何使用Vue.js实现一个带有删除、全选和总价计算功能的表格。通过v-model双向绑定，实现了商品的选中状态管理，以及总价的动态计算。同时，提供了删除商品的逻辑，当点击删除按钮时，能从表格中移除相应商品。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

要求

在这里插入图片描述

功能实现

初始页面
在这里插入图片描述
功能1：删除
点击删除操作后，整行可以被删除。

功能2：全选
当所有商品都被勾选上是，全选按钮也勾上，当全选按钮勾上时，所有商品都被勾选上。
在这里插入图片描述

功能3：计算总价
当输入商品数量时，商品金额发生改变，当勾选多个商品时，计算出所有商品的总价，当数量发生改变时，总价也发生改变。
在这里插入图片描述

代码实现

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>

</head>
<body>
 
     <div id="app" style="margin-top: 120px;margin-left: 400px;">
         <form action="#" method="post">
             <table border="1" style="width: 600px;text-align: center">
                 <tr>
                     <td style="width: 8%">
                         <input type="checkbox" v-model="isChecked">
                     </td>
                     <td style="width: 10%">商品id</td>
                     <td style="width: 30%">产品名称</td>
                     <td style="width: 20%">产品单价</td>
                     <td style="width: 20%">产品数量</td>
                     <td style="width: 30%">金额</td>
                     <td style="width: 50%">操作</td>
                 </tr>

                 <tr v-for=" (item,index) in lists " :key="index">
                     <td>
                         <input type="checkbox" v-model="item.isCheck">
                     </td>
                     <td>{{item.id}}</td>
                     <td>{{item.name}}</td>
                     <td >{{item.price}}</td>
                     <td>
                         <input type="number" min="0"  v-model="item.num" style="width: 40px">
                     </td>
                    <td style="font-weight: bold">
                        ￥{{(item.price*item.num)}}
                    </td>
                    <td>
                        <input @click="delGood(index)" type="button" value="删除">
                    </td>
                 </tr>
                 <tr>
                     <td colspan="6" style="text-align: left;color: red;font-weight: bold ;text-align: center" >
                         总价:    ￥{{getTotal }}
                     </td>
                 </tr>

                 
             </table>
         </form>
     </div>
 
     <script>
         const  vm=new  Vue({
             el:"#app",
             data(){
                 return{
                     lists:[
                         {
                             isCheck:false,
                             id:1,
                             name:"书包",
                             price:80,
                             num:0
                         },
                         {
                             isCheck:false,
                             id:2,
                             name:"水杯",
                             price:15,
                             num:0
                         },
                         {
                             isCheck:false,
                             id:3,
                             name:"雨伞",
                             price:15,
                             num:0
                         },
                         {
                             isCheck:false,
                             id:4,
                             name:"手电筒",
                             price:10,
                             num:0
                         }
                      ]
                 }
             },
             methods: {
                 //删除
                delGood:function(index) {
                    this.lists.splice(index, 1);
                }
             },
            
             computed:{
                 //计算总价格
                 getTotal:function(){
                    // 获取lists中isCheck为true的数据
                     let _listsCheck=this.lists.filter(function (val){
                         return val.isCheck===true;
                     })
                     //总价
                     let totalPrice=0
 
                     for (let i = 0; i < _listsCheck.length; i++) {  //循环获取lists中isCheck为true的数据
                         totalPrice+=_listsCheck[i].num*_listsCheck[i].price//将对应isCheck为true的数量与价格相乘得出总价
                     }
                     return totalPrice; 
                 },

                 

                 isChecked:{
                     get(){
                         let flag=true;
                         //读取的时候触发
                         this.lists.forEach(el=>{  //迭代lists中为isCheck
                             if(el.isCheck==false){  //当子选项有一个为false时，则全选设置为false
                                 flag=false;
                             }
                         })
                         return flag;
                     },
                    
                
                     set(val) //当isChecked被赋值的时候会触发这个set方法
                     {
                         if(val) //判断如果全选被选中，则其他的子选项全部选中，如果全选被取消，则其他的所有子选项取消选中
                         {
                             this.lists.map(function(el){
                                 return el.isCheck=true;
                             });
                         }else
                         {
                             this.lists.map(el=>el.isCheck=false);
                         }
                     }
                 }
             }
         })
     </script>
</body>
</html>