vue实现购物车列表

时间：2021-05-26

本文实例为大家分享了vue实现购物车列表的具体代码，供大家参考，具体内容如下

功能：

  • 删除
  • 单选 全选
  • 增加数量 减少数量
  • 计算总价 计算数量
  • 搜索

代码：

<!DOCTYPE html><!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script src="./js/vue.js"></script> </head> <body> <div id="app"> 筛选：<input type="text" v-model="key"> <table border="1" cellspacing="0" cellpadding="10"> <tr> <th> <input type="checkbox" v-model="all" @change="checkAll()" > </th> <th>id</th> <th>书籍名称</th> <th>出版日期</th> <th>购买价格</th> <th>数量</th> <th>操作</th> </tr> <tr v-for="(item,index) in flist" :key="item.id"> <td style="text-align: center;"><input type="checkbox" v-model="item.sel" ></td> <td>{{item.id}}</td> <td>{{item.name}}</td> <td>{{item.time}}</td> <td>{{item.price|prices}}</td> <td><button @click="item.num--" :disabled="item.num==1">-</button>{{item.num}}<button @click="item.num++">+</button></td> <td><button @click="delItem(item.id)">移除</button></td> </tr> <tr><td colspan="7">总价格:{{total.price|prices}} 选择数量:{{total.num}}</td></tr> </table> </div> <script> var vm = new Vue({ el:"#app", data:{ key:"", all:true, list:[ {id:1,name:"小红书",time:"2018-8",price:188.99,num:1,sel:true}, {id:2,name:"小烂熟",time:"2019-8",price:88.9,num:1,sel:true}, {id:3,name:"小绿树",time:"2017-5",price:133.00,num:1,sel:true}, {id:4,name:"发生的树",time:"2020-1",price:68.80,num:1,sel:true}, {id:5,name:"奥古",time:"2015-4",price:555.50,num:1,sel:true }, ] }, methods:{ delItem(item){ var falg=window.confirm("确定要删除吗？"); if(falg){ this.list.splice(item-1,1) } }, checkAll(){ this.list.forEach(item=>item.sel=this.all) } }, watch:{ list:{ handler:function(){ this.all=this.list.every(item=>item.sel) }, deep:true } }, computed:{ total:function(){ var price=0; var num=0; this.list.forEach(item=>{ if(item.sel){ price+=item.num*item.price num+=item.num*1 } }) return ({price,num}) }, flist:function(){ if(this.key===''){return this.list} return this.list.filter(item=>item.name.includes(this.key)) } }, filters:{ prices:function(val,fix=2){ val=val.toFixed(fix) val=""+val return "￥"+val } }, }) </script> </body></html>

关于vue.js组件的教程，请大家点击专题vue.js组件学习教程进行学习。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章