用vue.js 做的购物车效果

html:

 <div class="container">
      <table class="table table-bordered text-center">
        <thead>
            <tr>
                <th class="text-center">编号</th>
                <th class="text-center">名称</th>
                <th class="text-center">单价</th>
                <th class="text-center">数量</th>
                <th class="text-center">总价</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="(v,ind) in arr">
                <td>{{ind+1}}</td>
                <td>{{v.name}}</td>
                <td>{{v.danjia}}</td>
                <td><button @click="jia(ind)">+</button>{{v.num}}<button @click="jian(ind)">-</button></td>
                <td>{{v.price}}</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td colspan="5">总计：{{arrs}}元</td>
            </tr>
        </tfoot>
   </table>

</div>

js:

<script src="./js/vue.js"></script>
<script>
    new Vue({
        el:".container",
        data:{
            arr:[
                {name:"香蕉",danjia:"1",num:"1",price:"1"},
                {name:"苹果",danjia:"2",num:"1",price:"2"},
                {name:"鸭梨",danjia:"3",num:"1",price:"3"}
            ],
            arrs:6.00
        },
        methods:{
            jia:function(ind){
                //  数量
               this.arr[ind].num++;
                //  每行的小计
               this.arr[ind].price=(this.arr[ind].num)*(this.arr[ind].danjia);
                this.tal();
            },
            jian:function(ind){
               if(this.arr[ind].num<=1){
                   this.arr[ind].num=1
               }else{
                   this.arr[ind].num--
               };
                this.arr[ind].price=(this.arr[ind].num)*(this.arr[ind].danjia);
                this.tal();
            },
            //  总价
            tal:function(){
                    for(var i=0,j=0;i<this.arr.length;i++){
                        j+=Number(this.arr[i].price)
                    }
                    this.arrs=j
                }
            
           }
               
    })
</script>

效果图： QQ图片20180917164121.png