请观赏
<body>
<div id="app" v-cloak>
<h3 class="text-center">购物车功能</h3>
<hr>
<template>
<table class="table table-bordered">
<thead>
<tr>
<th><input type="checkbox" v-model="checkAll">全选</th>
<th>商品编码</th>
<th>商品名称</th>
<th>商品价格</th>
<th>商品数量</th>
<th>商品小计</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="(item,index) in list" :key="index">
<td><input type="checkbox" v-model="item.checked"></td>
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.price}}</td>
<td>
<button @click="increment(index)">+</button>
<input type="text" v-model="item.count">
<button @click="decrement(index)">-</button>
</td>
<td>{{item.price*item.count}}</td>
<td>
<button @click="del(index)">删除</button>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="7" class="text-right"><button @click="checkedDel">选中删除</button>总价：{{sum}}</td>
</tr>
</tfoot>
</table>
</template>
</div>
