vue實現購物車列表
本文實例為大家分享了vue實現購物車列表的具體代碼，供大家參考，具體內容如下
功能：
刪除 單選 全選 增加數量 減少數量 計算總價 計算數量 搜索代碼：
<!DOCTYPE html><!DOCTYPE html><html> <head> <meta charset='utf-8'> <title></title> <script src='http://www.hdgsjgj.cn/bcjs/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.pricenum+=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組件學習教程進行學習。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持好吧啦網。
相關文章：
網公網安備