Vue是一個流行的JavaScript框架，它提供了豐富的數據綁定和重用組件的功能。Vue的自動合計功能就是其中之一。

Vue的自動合計功能可以通過定義一個computed屬性來實現。在這個computed屬性中，我們可以對需要合計的數據進行計算和聚合操作。下面是一個簡單的例子，展示了如何使用Vue的自動合計功能：

<template>
<table>
<thead>
<tr>
<th>商品名稱</th>
<th>單價</th>
<th>數量</th>
<th>小計</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in items" :key="index">
<td>{{ item.name }}</td>
<td>{{ item.price }}</td>
<td>
<input v-model="item.quantity" type="number" min="1" max="999">
</td>
<td>{{ item.price * item.quantity }}</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">總計</td>
<td>{{ total }}</td>
</tr>
</tfoot>
</table>
</template>
<script>
export default {
data() {
return {
items: [
{ name: '手機', price: 999, quantity: 1 },
{ name: '平板電腦', price: 1999, quantity: 1 },
{ name: '筆記本電腦', price: 2999, quantity: 1 },
]
}
},
computed: {
total() {
return this.items.reduce((sum, item) => sum + item.price * item.quantity, 0)
}
}
}
</script>

在上面的代碼中，我們首先在data選項中定義了一個items數組，其中包含了三個商品的信息（名稱、單價、數量）。在模板中，我們使用v-for指令遍歷每個商品，并根據其數量和單價計算出小計。在tfoot部分，我們使用total計算了所有商品的總價，然后顯示在表格底部。

總的來說，Vue的自動合計功能極大地簡化了數據計算和展示的工作。我們只需要定義一個computed屬性，就可以輕松地完成對數據的聚合和展示。