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

设置4行数据显示在页面上点击删除可以删除当前行点击全选可以全选（不用和删除其他功能有关系），输入购买数量，总金额会改变

拜拜雪公主i

4160人浏览 · 2022-06-10 10:57:31

拜拜雪公主i · 2022-06-10 10:57:31 发布

要求

在这里插入图片描述

功能实现

初始页面
在这里插入图片描述
功能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>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

Vue

echarts堆叠柱状图

Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...