效果图如下：

需求：实现添加到购物车，删除，计算金额功能

一 、购买功能

实现思路：点击购买将商品添加到购物车,先循环对比看要添加的商品是否已经存在与购物车，如果存在，只加数量，不存在则添加

实现代码

 add(val) { //购买 ，这里我是传了对应的item 过来
            var result=true;
            for(var i of this.goods){
                if(val.book==i.book){ //判断名称是否已经存在
                    i.number++;
                    result=false;
                    break;
                }
            }
            if(result){//如果没则添加
                this.goods.push({
                    book:val.book,
                    score:val.nowPrice*10,
                    marketPrice:val.oldPrice,
                    dangPrice:val.nowPrice,
                    discount:Math.ceil(val.nowPrice/val.oldPrice*100),
                    number:'1'
                });
            }
        },

二、删除功能

实现思路：点击删除，将对应的商品从list数组中删除，根据传过来的index，调用数组的splice方法

实现代码

del(i){ //删除
    this.goods.splice(i,1);
},

三、计算金额功能

实现思路：拿到对应数量单价，运算得到所有商品金额之和

实现代码

amount(){ //计算总金额
    // var _this=this;
    var oldSum=0;
     this.sum=0;
    this.score=0;
    for(var i of this.goods){
        this.sum+=i.number*i.dangPrice;//计算当当总价格
        oldSum+=i.number*i.marketPrice; //计算市场总价格
        this.score+=i.number*i.score; //计算积分
    }
    this.save=oldSum-this.sum;//差价
},

html代码

<div id="wrapper">
    <!--我的购物车-->
    <div class="shopCart">
        <h3>
            <span class="sp_icon"></span>全场免运费活动中
        </h3>
        <div class="goodlist_box">
            <p class="title">根据您挑选的商品，当当为您推荐 <span class="ssj_icon"></span></p>
            <table class="tb">
                <tr class="book_info" v-for="(item,index) in list1">
                    <td>{{item.book}}</td>
                    <td class="oldPrice">￥{{item.oldPrice | money(2)}}</td>
                    <td class="nowPrice">￥{{item.nowPrice | money(2)}}</td>
                    <td class="buy" @click="add(item)">购买</td>
                </tr>
            </table>
            <div class="cutline"></div>
        </div>
    </div>
    <!--已选购商品-->
    <div class="choosed_list">
        <h3>您已选购以下产品</h3>
        <div class="pay_box">
            <ul class="goods_list">
                <li class="line line1">
                    <ul>
                        <li>商品名</li>
                        <li>单品积分</li>
                        <li>市场价</li>
                        <li>当当价</li>
                        <li>数量</li>
                        <li>删除</li>
                    </ul>
                </li>
                <li class="line cnt_line">
                    <ul v-for="(item,index) in goods">
                        <li class="color_b">{{item.book}}</li>
                        <li class=score>{{item.score}}</li>
                        <li class="market_p">￥{{item.marketPrice | money(2)}}</li>
                        <li class="dd_p">￥{{item.dangPrice | money(2)}}({{item.discount}}折)</li>
                        <li class="number"><input class="num" type="text"  v-model="item.number" @blur="checkNum(item)"></li>
                        <li class="color_b" @click="del(index)">删除</li>
                    </ul>
                </li>
            </ul>
            <div class="total">
                <div class="totol_l">
                    <p class="save">您共节省：<span id="save_money">￥{{save | money(2)}}</span></p>
                    <p class="totalScore">可获商品积分：<span id="get_score">{{score}}</span></p>
                </div>
                <div class="totol_r">
                    <p>商品金额总计: <span id="total_money">{{sum | money(2)}}</span> <span class="pay icon_pay"></span></p>
                </div>
            </div>
        </div>
    </div>
</div>

js 代码

var vm=new Vue({
    el:'#wrapper',
    data:{
        //推荐商品,html中用v-for渲染
        list1:[
            {book:'.Javascript Dom编程艺术',oldPrice:39,nowPrice:29.3},
            {book:'.解禁(当当网独家首发)',oldPrice:28,nowPrice:19.4},
            {book:'.地王之王(金融危机地下房地产行...',oldPrice:32.8,nowPrice:25.1},
            {book:'.逃庄',oldPrice:36,nowPrice:27.7},
            {book:'深入浅出的MySQL数据库开发',oldPrice:59,nowPrice:47.2},
            {book:'.大玩家(马未都、王刚推荐！央...',oldPrice:34.8,nowPrice:20.6},
            {book:'.都市风水师--官场风水小说:一...',oldPrice:39.8,nowPrice:30.5},
            {book:'.国戏(以麻将术语解读宦海沉浮...',oldPrice:25,nowPrice:17.3}
        ],
        //购物车原有商品
        goods:[
            {book:'私募(首部披露资本主义博弈秘密的金融...',score:189,marketPrice:32,dangPrice:18.9,discount:59,number:1},
            {book:'小团圆（张爱玲最神秘的小说遗稿）',score:173,marketPrice:28,dangPrice:17.3,discount:62,number:1},
            {book:'不抱怨的世界（畅销全球80国的世界...',score:154,marketPrice:24.8,dangPrice:15.4,discount:62,number:1},
            {book:'福玛特双桶洗衣机XPB20-07S',score:358,marketPrice:458,dangPrice:358,discount:78,number:1},
            {book:'PHP和MySQL Web开发（原书第四版）',score:712,marketPrice:95,dangPrice:71.2,discount:75,number:1},
            {book:'法布尔昆虫记',score:10,marketPrice:198,dangPrice:130.7,discount:66,number:1},
        ],
        sum:0,//定义总价钱变量
        save:0, //定义节省的钱
        score:0 //积分
    },
    watch:{ //监听，数量一改变调用计算金额函数
        goods: {
            handler: function () {
                this.amount();
            },
            deep: true
        }
    },
    mounted:function(){ //挂载完成后调用计算金额函数
        this.amount();
    },
    methods:{
        del(i){ //删除
            this.goods.splice(i,1);
        },
        add(val) { //购买 ，这里我是传了对应的item 过来
            var result=true;
            for(var i of this.goods){
                if(val.book==i.book){ //判断名称是否已经存在
                    i.number++;
                    result=false;
                    break;
                }
            }
            if(result){//如果没则添加
                this.goods.push({
                    book:val.book,
                    score:val.nowPrice*10,
                    marketPrice:val.oldPrice,
                    dangPrice:val.nowPrice,
                    discount:Math.ceil(val.nowPrice/val.oldPrice*100),
                    number:'1'
                });
            }
        },
        amount(){ //计算总金额
            // var _this=this;
            var oldSum=0;
             this.sum=0;
            this.score=0;
            for(var i of this.goods){
                this.sum+=i.number*i.dangPrice;//计算当当总价格
                oldSum+=i.number*i.marketPrice; //计算市场总价格
                this.score+=i.number*i.score; //计算积分
            }
            this.save=oldSum-this.sum;//差价
        },
        checkNum:function(num){
            var reg=/^[1-9][0-9]{0,9}$/;
            if(!reg.test(num.number)){
                num.number=1;
            }
        }
    },
    filters:{//过滤器，Data是固定写法，n为参数
        money:function (data,n) {
            return data.toFixed(n);
        }
    }
});