一、功能簡介及實現效果
- 首先，我用輸入框來對物品進行添加，然後把物品信息放入表格中（商品列表）
- 在商品列表中，點擊加入購物車，對物品進行添加購物車操作；
- 當對購物車物品，減少數量到0時，彈框 “確認刪除該物品？”；
- 具體看下面效果圖：
![購物車效果圖]()
二、代碼實現
- 表格的CSS樣式
<style type="text/css"> #table { border: 2px solid black; text-align: center; width: 700px; border-collapse: collapse; } #table tr td,th { border: 1px solid black; } </style> - HTML代碼和vue代碼
添加物品，物品列表和購物車列表，在vue對象的模板中實現；
增加數量，直接在點擊事件中增加數量；
減少數量，在點擊事件中，定義minus(index)方法；
小計，直接使用每種商品的 單價*數量；
還用到的點擊事件方法有：addcourse：添加商品addtochat(index)：添加到購物車sum()：計算總價
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>購物車</title> <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> <script src="js/vue-router.js"></script> </head> <body> <div id="app"></div> </body> <script> //創建Vue對象 var app = new Vue({ el: '#app', template: ` <div> <div> 名稱：<input type="text" v-model='name'><br/> 單價：<input type="number" v-model='price'><br/> <button @click='addcourse'>添加商品</button> </div> <p></p> <table id='table'> <caption>商品列表</caption> <tr> <th>編號</th> <th>名稱</th> <th>單價</th> <th>操作</th> </tr> <tr v-for='(list,index) in infoList'> <td>{{index + 1}}</td> <td>{{list.name}}</td> <td>{{list.price}}</td> <td><button @click='addtochat(index)'>添加到購物車</button></td> </tr> </table> <p></p> <table id="table"> <caption>購物車列表</caption> <tr> <th>編號</th> <th>名稱</th> <th>單價</th> <th>數量</th> <th>小計</th> </tr> <tr v-for="(shop,index) in shopList"> <td>{{index+1}}</td> <td>{{shop.name}}</td> <td>{{shop.price}}</td> <td> <button @click="minus(index)">－</button> {{shop.count}} <button @click="shop.count+=1">＋</button> </td> <td>{{shop.price*shop.count}}</td> </tr> <tr> <th colspan="5">總計:{{sum()}}</th> </tr> </table> </div> `, data: { //商品信息數組 infoList: [], name: '', price: '', //購物車數組 shopList: [] }, methods: { //購物車中，點擊減號減少商品數量 minus(index){ //如果商品數量大於1，則點擊減號減少 if(this.shopList[index].count > 1){ this.shopList[index].count-- }else{ //否則，如果小於1，則判斷是否刪除該商品 if(window.confirm("確認刪除《"+this.shopList[index].name+"》?")){ //對購物車數組進行數組拼合 this.shopList.splice(index,1); } } }, //總價 sum() { var total = 0; for (var i = 0; i < this.shopList.length; i++) { total += this.shopList[i].price * this.shopList[i].count; } return total; }, //添加商品 addcourse() { //插入數據到商品庫 this.infoList.push({ name: this.name, price: this.price }) //清空輸入的商品信息 this.name = ''; this.price = ''; }, //添加至購物車 addtochat(index) { //獲取商品列表中的商品信息，賦給goods變量 const goods = this.infoList[index] //查找購物車中是否已經含有添加的商品 const result = this.shopList.find(v => v.name == goods.name) //如果有，則購物車中的現有商品+1 if (result) { result.count += 1 } else { this.shopList.push({ name: goods.name, price:goods.price, count: 1 }) } } } }) </script> </html>
三、最後，測試，就能實現圖中的效果，希望可以幫到大家！！