vue2.0實現購物車功能

• 2019 年 10 月 6 日
• 筆記

購物車功能是一件比較繁瑣的事情，邏輯功能太多，今天就用vue2.0實現一個簡單的購物車功能，數據都本地自己寫的假數據

功能列表：

1、全選和單選結算

2、減少和增加數量

3、商品的刪除

介面搭建以及布局，這裡，我直接用bootstrap快速搭建的一個簡單的布局

<div class="container" id="app">              <h2 class="page-header">購物車</h2>              <table class="table">                  <tr>                      <th><label><input type="checkbox" @click="check_all" :checked="check_goods.length == cart_list.length"/>全選</label></th>                      <th>商品名稱</th>                      <th>商品價格</th>                      <th>數量</th>                      <th>操作</th>                  </tr>                  <tr v-for="(cart,index) in cart_list" :key="index">                      <td><input type="checkbox" :value="cart" v-model="check_goods" /></td>                      <td>{{cart.goods_name}}</td>                      <td>{{cart.goods_price}}</td>                      <td class="col-xs-3">                          <span class="btn btn-default" v-on:click="reduce(cart)">-</span>                          <input class="btn-group" type="number" v-model="cart.num" />                          <span class="btn btn-default" v-on:click="add_num(cart)">+</span>                      </td>                      <td>                          <button class="btn btn-danger" v-on:click="delete_num">刪除</button>                      </td>                  </tr>              </table>              <div>                  總計：共 {{cart_list.length    }}件商品，已選擇 {{total_num}} 件                  <div class="pull-right">                      合計：{{total_price}}元                      <a href="" class="btn btn-success" :disabled="check_goods.length <= 0">去結算</a>                  </div>              </div>          </div>

所有的數據都是自己本地寫的

data() {  	return {  		cart_list: [{  		　　goods_name: '小米6',  		　　goods_price: '1699',  		　　num: '2',  		},{  		   goods_name: '紅米3',  		   goods_price: '699',  		   num: '1',  		},{  		   goods_name: '小米8',  		   goods_price: '2899',  		   num: '1',  		}],  		   check_goods: [] //已選擇的商品  	      }  	},

計算屬性：

計算出商品中，總價和數量

　　　　　　　　　　　　　　computed: {  //				總價  				total_price() {  					let price = 0  　　　　　　　　　　　　　　　　　　　　　　　　  					this.check_goods.forEach(item => {  //						總價 = 價格 * 數量  						price += Number(item.goods_price) * Number(item.num)  					})  					return price  				},  //				數量  				total_num() {  					let t_num = 0;  					this.check_goods.forEach(item => {  						t_num += Number(item.num);  					})  					return t_num  				}  			},

　實現商品增加減少，刪除功能

　　　　　　　　　　　　　　methods:{  //				商品類減減  				reduce(cart) {  					if(cart.num <=0) {  						cart.num = 0  					} else {  						cart.num --  					}  				},  //				商品累加  				add_num(cart) {  					cart.num++  				},  //				刪除商品  				delete_num(cart){  					this.check_goods.splice(this.check_goods.indexOf(cart),1)  					this.cart_list.splice(this.cart_list.indexOf(cart),1)  				},  //				全選  				check_all() {  					if (this.check_goods.length >0) {  						this.check_goods = []  					} else {  						this.cart_list.forEach(item => {  							this.check_goods.push(item)  						})  					}  				}  			}

　　至此我們的購物車基本功能就完成了，