vue之购物车

vue.js的引用是命令安装模式，这里直接上App.vue文件，注意：@是v-on的缩写，: 是v-bind: 的缩写。

<template>
  <div>    
    <p>购物车</p>
    <table>
     <tr>
        <th>序号</th>
        <th>商品名称</th>
        <th>商品价格</th>
        <th>购买数量</th>
        <th>操作</th>
     </tr>
     <tr v-for="(value, index) in goods" :index="index">
       <td>{{ value.id }}</td>
       <td>{{ value.name }}</td>
       <td>{{ value.price }}</td>
       <td>
         <button :disabled="value.count === 0" @click="value.count-=1">-</button>
         {{ value.count }}
         <button @click="value.count+=1">+</button>
       </td>
       <td>
         <button @click="deleteGoods">移除</button>
       </td>
     </tr>
     <tr><td colspan="4"></td><td style="width:180px">总价：${{totalGoodsrice()}}</td></tr>
   </table>   
  </div>
</template>

<script>
export default {
  data (){ 
    return{    
      goods: [
      {
        id: 1,
        name: '商品1',
        price: 50,
        count: 1
      },
      {
        id: 2,
        name: '商品2',
        price: 34,
        count: 1
      },
      {
        id: 3,
        name: '商品3',
        price: 25,
        count: 1
      }
      ]
    }
  },
  methods: {
    totalGoodsrice () {
      var totalGoods = 0;
      for (var i = 0,len = this.goods.length;i<len;i++) {
        totalGoods += this.goods[i].price*this.goods[i].count;
      }
      return totalGoods;
    },
    deleteGoods (index) {
      if(confirm('确定移除商品吗？')){
        this.goods.splice(index, 1) 
      }else{
        return false;
      }
    }
  }
}
</script>

<style>
table {    
    width: 800px;
}
th, td {
    border: 1px solid #ddd;
    text-align: center;
}
</style>