vue實現購物車列表
阿新 • • 發佈:2020-07-03
本文例項為大家分享了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,{id:3,name:"小綠樹",time:"2017-5",price:133.00,{id:4,name:"發生的樹",time:"2020-1",price:68.80,{id:5,name:"奧古",time:"2015-4",price:555.50,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元件學習教程進行學習。
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。