Vue----购物车Cart

功能：实现单个单价的变化，同步更新总价

html

<div class="wrap wrap-cart" id="app">    <div class="area">        <div class="cart-title"><span>购物车</span></div>        <div class="cart-table">            <div class="cart-head">                <ul>                    <li>商品信息</li>                    <li>单价</li>                    <li>数量</li>                    <li>小计</li>                    <li>编辑</li>                </ul>            </div>            <ul class="cart-body">                <li v-for="(item, index) in productList">                    <div class="cart-item">                                                    <a href="javascript:;" class="check-btn" v-bind:class="{'checked':item.checked}" v-on:click="selectProduct(item)">                            <svg class="icon icon-ok"><use xlink:href="#icon-ok"></use></svg>                        </a>                        <div class="goods-msg clearfix">                            <img class="img" v-bind:src="item.productImage" alt="">                            <div class="title">                                <a href="detail.html" target="_blank" v-text="item.productName"></a>                                <p v-for="part in item.parts" v-text="part.partName"></p>                            </div>                        </div>                      </div>                    <div class="cart-item">                        <span class="item-price">{{ item.productPrice | partFilter('') }}</span>                    </div>                    <div class="cart-item">                        <div class="num-amount">                            <span class="num-increase" @click="changeMoney(item, -1)">-</span>                            <input type="text" class="num-input" :value="item.productQuantity" disabled>                            <span class="num-decrease" @click="changeMoney(item, +1)">+</span>                        </div>                        </div>                    <div class="cart-item">                        <span class="item-price-total">{{ item.productPrice * item.productQuantity | money('元') }}</span>                    </div>                    <div class="cart-item">                        <a href="javascript:;" class="icon-btn" @click="delBtn(item)">                            <svg class="icon icon-del"><use xlink:href="#icon-del"></use></svg>                        </a>                    </div>                                  </li>            </ul>        </div>        <div class="cart-foot">            <div class="f-l">                <a href="javascript:;" class="check-btn" :class="{'checked':checkAllFlag}" @click="allSelect(true)">                    <svg class="icon icon-ok"><use xlink:href="#icon-ok"></use></svg>                </a>                <a href="javascript:;" @click="allSelect(true)"  v-if="!checkAllFlag" >全选</a>                <a @click="allSelect(false)" href="javascript:;" v-if="checkAllFlag">取消全选</a>            </div>            <div class="f-r">                总金额：<span class="total-price">{{ totalMoney | partFilter('元') }}</span>                <a href="goods-order.html" class=""><button class="btn gopay-btn radius">结账</button></a>            </div>        </div>    </div>    <!-- 遮罩层 -->    <div class="md-overlay" v-if="delFlag"></div>    <!-- 提示框 -->    <div class="md-panel" :class="{'md-show':delFlag}">        <div class="md-inner">            <div class="panel-header"><div class="panel-close" @click="delFlag=false"></div></div>            <div class="panel-body">你确认删除此订单信息吗?</div>            <div class="panel-footer clearfix">                <button class="btn-confirm" @click="confirmDel">YES</button>                <button class="btn-cancel" @click="delFlag=false">NO</button>                               </div>        </div>     </div></div>

js

<script src="./style/js/libs/vue/vue.min.js"></script><script src="./style/js/libs/vue/vue-resource.js"></script><script> new Vue({    el:'#app',    data:{        productList  :[],        totalMoney   : 0,        checkAllFlag :false,        delFlag      :false,        curProduct   :''    },    filters:{        partFilter:function(value, type){            return '￥ ' + value.toFixed(2) + type;    // 保留2位仅做测试用        }    },    mounted:function(){        this.$nextTick(function(){            this.getCartList();        })    },    methods:{        // 提取数据        getCartList:function(){            var _this =　this;            // this.$http.get('./style/js/cart.json', {'id':12}).then(res=>{       // ES6            this.$http.get('./style/js/cart.json', {'id':12}).then( function(res) {                _this.productList = res.data.result.list;                // 效果是一样的//                    console.log(res.data);    //                    console.log(res.body);            })        },        // 选择商品        selectProduct:function(item){            if(typeof item.checked == 'undefined'){                // 注册一个变量￥set(obj, key, val), 也可以在数据库里增加字段处理                this.$set(item, 'checked', true);            } else {                item.checked = !item.checked;            }            // console.log(item.checked)            // 全部选中则全部按钮点亮，相反            var checkAllFlags = true;            this.productList.forEach( function(item, index){                checkAllFlags = checkAllFlags && item.checked;            });            this.checkAllFlag = checkAllFlags;            // 再计算金额            this.callTotalMoney();         },        // 点击执行全选        allSelect:function(flag){            this.checkAllFlag = flag;            // this.productList.forEach((item, index)=>{    // ES6            var _this = this;            this.productList.forEach( function(item, index){                if(typeof item.checked == 'undefined'){                    // 一上来就点全选的情况，也要注册一个变量                    _this.$set(item, 'checked', true);                } else {                    item.checked = _this.checkAllFlag;                }            });             // 再计算金额            this.callTotalMoney();         },         // 计算金额        callTotalMoney:function(){            this.totalMoney = 0;            // this.productList.forEach((item, index)=>{     // ES6            var _this = this;            this.productList.forEach( function(item, index){                    if(item.checked){                    _this.totalMoney += item.productPrice * item.productQuantity;                }            })        },        // 点击加减商品数量计算金额        changeMoney:function(item, type){          if(type < 0){              item.productQuantity--;              if(item.productQuantity < 1) item.productQuantity = 1;          } else {              item.productQuantity++;          }            // 再计算金额            this.callTotalMoney();         },        // 点击删除        delBtn:function(item){            this.delFlag     = true;            this.curProduct  = item;        },        // 点击确认删除按钮        confirmDel:function(){            this.delFlag = false;            var index = this.productList.indexOf(this.curProduct);            console.log(index);            this.productList.splice(index, 1);            // 再计算金额            this.callTotalMoney();         }    }})// 全局过滤器Vue.filter("money", function(value, type){    return '￥ ' + value.toFixed(2) + type;})</script>