本文實例為大家分享了vue實現購物車列表的具體代碼,供大家參考,具體內容如下
功能:
刪除
單選 全選
增加數量 減少數量
計算總價 計算數量
搜索
代碼:
篩選:id書籍名稱出版日期購買價格數量操作{{item.id}}{{item.name}}{{item.time}}{{item.price|prices}}-{{item.num}}+移除總價格:{{total.price|prices}} 選擇數量:{{total.num}}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 } }, })" _ue_custom_node_="true">
[lousu-xi ] vue實現購物車列表已經有340次圍觀