可以使用Vue的v-model和计算属性来实现表格中数量的加减功能。
首先，在Vue实例中定义一个数组items，数组中包含多个对象，每个对象代表表格中的一行数据，包含一个quantity属性来表示数量。例如：
new Vue({
el: '#app',
data: {
items: [
{
id: 1, name: 'item 1', quantity: 0 },
{
id: 2, name: 'item 2', quantity: 0 },
{
id: 3, name: 'item 3', quantity: 0 },
]
},
methods: {
increment(item) {
item.quantity++;
},
decrement(item) {
if (item.quantity > 0) {
item.quantity--;
}
}
},
computed: {
totalQuantity() {
return this.items.reduce((sum, item) => sum + item.quantity, 0);
}
}
});
然后，在模板中通过v-for指令遍历items数组，并使用v-model指令将数量绑定到输入框中。同时，使用两个按钮调用increment和decrement方法来增加或减少数量。最后使用计算属性totalQuantity来计算所有商品的总数量。
<div id="app">
<table>
<tr v-for="item in items" :key="item.id">
<td>{
{ item.name }}</td>
<td>
<button @click="decrement(item)">-</button>
<input type="number" v-model="item.quantity">
<button @click="increment(item)">+</button>
</td>
</tr>
</table>
<p>Total quantity: {
{ totalQuantity }}</p>
</div>
这样，当点击加号按钮时，对应商品的数量会增加，当点击减号按钮时，对应商品的数量会减少。总数量会根据计算属性的逻辑自动更新。
参考文档：
- v-model：https://vuejs.org/v2/guide/forms.html#Basic-Usage
- 计算属性：https://vuejs.org/v2/guide/computed.html
