购物车功能是一件比较繁琐的事情,逻辑功能太多,今天就用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>
所有的数据都是自己本地写的
1
2
3
4
5
6
7
8
9
10
11
12
13
|