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

要求

功能实现

初始页面

功能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=0for (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中为isCheckif(el.isCheck==false){  //当子选项有一个为false时，则全选设置为falseflag=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购物车功能计算总价/全选/删除相关推荐

Mac OS开发—Xcode给Mac应用添加编辑快捷键(剪切复制粘贴全选删除撤销重做)功能
前言笔者做Windows开发的,无奈公司有Mac OS的项目需要维护,之前没有编辑菜单的功能,需要笔者加上这个功能,笔者只能硬着头皮上.还好会c++,Mac应用里面一般都会用object-c 也可以 ...
用vue写一个计算总价
用vue写一个计算总价点击移除可以删除本项点击加减实现加减总价随着数量增加 <!DOCTYPE html> <html><head><meta char ...
php jquery 全选删除,jQuery+php简单实现全选删除的方法
jQuery+php简单实现全选删除的方法发布于 2017-08-06 10:13:21 | 66 次阅读 | 评论: 0 | 来源: 网友投递 PHP开源脚本语言PHP(外文名: Hypertex ...
php全选删除,php+ajax简单实现全选删除的方法
本文实例讲述了php+ajax简单实现全选删除的方法.分享给大家供大家参考,具体如下: 删除 ↑全选checkbox ↑为删除项,同一命名class为ckb,方便操作,同时将id值巧妙的放入input ...
php全选删除文件,一个简单的PHP全选删除数据
各位帮忙看看,还要修改什么!! <--------表单页面(index.php)---------> /* 链接数据库和网站配置信息 */ ?> 全选删除 function All( ...
网易企业邮箱删除的的邮件服务器,网易企业邮箱进行全选删除移动操作步骤说明...
使用问题您的位置: 首页> 使用问题网易企业邮箱进行全选删除移动操作步骤说明发布时间:2019-04-15 使用万网企业邮箱webmail时,如对现有邮件需要删除,可参考以下不同删除邮件方 ...
vi编辑器全选删除命令ggVGd 全选复制命令（转载）
博文转载自互联网,有删改,如有侵权请及时联系删除 vi编辑器全选删除命令为 ggVGd ggVG 稍微解释一下上面的命令 gg 让光标移到首行,在vim才有效,vi中无效 V 是进入Visual( ...
vue.js实战——购物车练习（包含全选功能）
vue.js实战第5章 54页的练习1 直接放代码好了,全选的部分搞了好久,代码好像有点啰嗦,好在实现功能了(*^▽^*) HTML: <!DOCTYPE html> <html l ...
购物车案例模块（全选，增减商品数量，修改商品小计，计算总计和面额，删除商品，选中商品添加背景）
一. 全选按钮分析: 里面3个小的复选框按钮(j-checkbox)选中状态(checked)跟着全选按钮(checkall)走. 因为checked是复选框的固有属性,此时我们需要利用prop()方 ...

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

要求

功能实现

代码实现

Vue购物车功能计算总价/全选/删除相关推荐

最新文章

热门文章