vue实现购物车功能

 请看如下代码：

<template>
     <div  v-if="goods_list.length">
        <table>
            <thead>
                <tr>
                    <th>商品名称</th>
                    <th>单价</th>
                    <th>购买数量</th>
                    <th>合计</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(goods,index) in goods_list">
                    <td>{{ goods.name }}</td>
                    <td>{{ goods.price }}</td>
                    <td><input type="text" size="5" :value="goods.num" /></td>
                    <td>{{ goods.price * goods.num}}</td>
                    <td>
                        <a href="javascript:;">删除</a>
                    </td>
                </tr>
            </tbody>
        </table>
        <div>
            共{{ count }}件商品 购物车总金额：￥{{total}}元
        </div>
     </div>     
     <div v-else>购物车为空</div>
</template>

商品总和以及商品总价如何计算呢？当然是利用“计算属性”了。在计算属性中，通过for循环，累加来得到商品总和和商品总价

        computed:{
            count : function(){
                var num = 0;
                for(var i in this.goods_list){
                    num += parseInt(this.goods_list[i].num);
                }
                return num;
            },
            total : function(){
                var total = 0;
                for(var i in this.goods_list){
                    total += this.goods_list[i].price * this.goods_list[i].num;
                }
                return total;
            }
        }

购物车，用户会修改，购买数量，以及移除商品等操作。那么我们如何实现呢，当然是利用索引值index，然后利用change事件 和 点击事件来实现了（这是我最喜欢的一种）。当然也可以利用以下方法：

 <tr v-for="(goods,index) in goods_list">
      <td>{{ goods.name }}</td>
      <td>{{ goods.price }}</td>
      <td><input type="text" size="5" :value="goods.num" v-on:blur="changeNumber(goods,$event)" /></td>
      <td>{{ goods.price * goods.num}}</td>
       <td>
          <a href="javascript:;" v-on:click="remove(goods)">删除</a>
       </td>
 </tr>

 methods: {
            changeNumber: function (goods, event) {
                var obj = $(event.target);
                goods.num = parseInt(obj.val());
            },
            remove: function (goods) {
                model.goods_list.splice($.inArray(2, model.goods_list), 1);
            }
        }

 

来源：CSDN

作者：叶落森

链接：https://blog.csdn.net/xiasohuai/article/details/81911247