SOURCE

var app = new Vue({
		  el: '#app',
		  data: {
		    list: [
		      {
		        id: '1',
		        name: 'iPhone 7',
		        price: 6188,
		        count: 1,
		        status : 1
		      },
		      {
		        id: '2',
		        name: 'iPad Pro',
		        price: 5188,
		        count: 1,
		        status : 1
		      },
		      {
		        id: '3',
		        name: 'MacBook Pro',
		        price: 21488,
		        count: 1,
		        status : 1
		      }
		    ]
		  },
		  computed: {
		    totalPrice: function() {
		      var total = 0;
		      for(var i = 0; i < this.list.length; i++) {
		      	var item = this.list[i];
		      	if(item.status) {
		      		 total += item.price * item.count;
		      	}
		      }
		      return total != 0 ? total.toString().replace(/\B(?=(\d{3})+$)/g,',') : 0;
		    }
		  },
		  methods: {
		    handleReduce: function(index) {
		      if(this.list[index].count === 1) return;
		      this.list[index].count--;
		    },
		    handleAdd: function(index) {
		      this.list[index].count++;
		    },
		    handleRemove: function(index) {
		      this.list.splice(index, 1);
		    },
		    handleChecked: function(index) {
		  		this.list[index].status = !this.list[index].status;
		  	},
		  	isChecked: function(index) {
		  		return this.list[index].status;
		  	},
	      	isCheckedAll: function() {
	  			//列表全为true该status才为true，否则为false
		  		var status = true;
		  		for(var i = 0; i < this.list.length; i++) {
		  			//一旦列表的status有一个为false则status就为false
		  			if(!this.list[i].status) {
		  				status = false;
		  				return status;
		  			}
		  		}
		  		return status;
	  		},
		    handleAll: function() {
		  		//拿到是否是全选
		  		var status = this.isCheckedAll();
		  		status = status ? 0 : 1;
		  		for(var i = 0; i < this.list.length; i++) {
		  			this.list[i].status = status;
		  		} 
		  	}
		  }
		})

	<div id="app" cloak>
	  <template v-if="list.length">
	    <table>
	      <thead>
	        <tr>
	          <th><input type="checkbox" @click="handleAll" :checked="isCheckedAll()">全选</th>
	          <th>序号</th>
	          <th>商品名称</th>
	          <th>商品单价</th>
	          <th>购买数量</th>
	          <th>操作</th>
	        </tr>
	      </thead>
	      <tbody>
	        <tr v-for="(item, index) in list">
	          <td><input type="checkbox" @click="handleChecked(index)" :checked="isChecked(index)"></td>
	          <td>{{ index + 1 }}</td>
	          <td>{{ item.name }}</td>
	          <td>{{ item.price }}</td>
	          <td>
	            <button @click="handleReduce(index)" :disabled="item.count===1">-</button>
	            {{ item.count }}
	            <button @click="handleAdd(index)">+</button>
	          </td>
	          <td>
	            <button @click="handleRemove(index)">移除</button>
	          </td>
	        </tr>
	      </tbody>
	    </table>
	    <div>总价：￥{{ totalPrice }}</div>
	  </template>
	  <div v-else>购物车为空</div>
	</div>
<script src="https://cdn.bootcss.com/vue/2.4.4/vue.js"></script>

	[v-cloak] {
		  display: none;
		}
		table {
		  border: 1px soli #e9e9e9;
		  border-collapse: collapse;
		  border-spacing: 0;
		  empty-cells: show;
		}

		th, td {
		  padding: 8px 16px;
		  border: 1px solid #e9e9e9;
		  text-align: left;
		}

		th {
		  background-color: #f7f7f7;
		  color: #5c6b77;
		  font-weight: 600;
		  white-space: nowrap;
		}