vue.js随写购物车

html部分

<div id="app">
    <table>
    <tr>
        <th>序号</th>
        <th>商品名称</th>
        <th>商品价格</th>
        <th>购买数量</th>
        <th>增减操作</th>
    </tr>
    <tr v-for="app in app_json">
        <td>{{ app.id }}</td>
        <td>{{ app.name }}</td>
        <td>{{ app.price }}</td>
        <td>
        <button v-bind:disabled="app.count == 0" v-on:click="app.count--">-</button>
        {{app.count }}
        <button v-on:click="app.count++">+</button>
        </td>
        <td>
        <button v-on:click="app.count=0">移除</button>
        </td>
    </tr>
    </table>
    总价：${{totalPrice()}}
</div>

js部分

new Vue({
  el: '#app',
  data: {
    app_json: [{
      id: 1,
      name: '金苹果',
      price: 999,
      count: 1
    },
              {
                id: 2,
                name: '红苹果',
                price: 998,
                count: 1
              },
              {
                id: 3,
                name: '毒苹果',
                price: -99,
                count: 1
              }]

  },
  methods:{
    totalPrice : function(){
      var totalP = 0;
      for (var i = 0,len = this.app_json.length;i<len;i++) {
        totalP+=this.app_json[i].price*this.app_json[i].count;
      }
      return totalP;
    }


  }
})

结果