歡迎您光臨本站 註冊首頁

vue實現購物車列表

←手機掃碼閱讀     lousu-xi @ 2020-07-01 , reply:0

本文實例為大家分享了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次圍觀

http://coctec.com/docs/vue-js/show-post-240524.html