Vue实现简单购物车效果

效果：总计会随着总价的变化而变化，总价随着数量的变化而变化

QQ截图20180914094046.png

body部分：

<div id="app">
   <table border='1' cellspacing='0'>
       <thead>
           <tr>
               <th>编号</th>
               <th>名称</th>
               <th>单价</th>
               <th>数量</th>
               <th>总价</th>
           </tr>
       </thead>
       <tbody>
           <tr v-for='(value,index) in arr'>
               <td>{{value.num}}</td>
               <td>{{value.uname}}</td>
               <td>{{value.price}}</td>
               <td>
                   <button v-on:click='jia(index)'>+</button>
                       {{value.quantity}}
                   <button v-on:click='jian(index)'>-</button>
               </td>
               <td>{{value.total}}</td>
           </tr>
           <tr>
               <td colspan='5' style='text-align:center;'>总计:<span>{{arrs}}</span>元</td>
           </tr>
       </tbody>
   </table>
</div>

js部分：

new Vue({
        el:'#app',
        data:{
            arr:[
                {num:1,uname:'香蕉',price:1,quantity:1,total:1},
                {num:2,uname:'苹果',price:2,quantity:1,total:2},
                {num:3,uname:'橘子',price:3,quantity:1,total:3}
            ],
            arrs:6
        },
        methods:{
            jia:function(ind){
                this.arr[ind].quantity++
                this.arr[ind].total=(this.arr[ind].price)*this.arr[ind].quantity
                this.getTotal()
            },
            jian:function(index){
                if(this.arr[index].quantity>1){
                    this.arr[index].quantity--
                    this.arr[index].total=this.arr[index].price*this.arr[index].quantity
                }
                this.getTotal()
            },
            getTotal:function(){
                for(var i=0,to=0;i<this.arr.length;i++){
                    to+=Number(this.arr[i].total)
                }
                this.arrs=to;
            }
        }
    })

style部分：

<style>
    th,td{
        border:1px solid #000;
        width:100px;
        height:30px;
        text-align: center;
    }
</style>