在Vue中，我們經(jīng)常需要顯示一個列表，其中每個項都有一些基本數(shù)據(jù)，如名稱、數(shù)量、價格等。在這些數(shù)據(jù)中，經(jīng)常需要計算出總額或合計。Vue提供了一種簡單的方式來計算這些合計。

<template>
<div>
<table>
<thead>
<tr>
<th>名稱</th>
<th>數(shù)量</th>
<th>單價</th>
<th>小計</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in itemList" :key="index">
<td>{{ item.name }}</td>
<td>{{ item.qty }}</td>
<td>{{ item.price }}</td>
<td>{{ item.qty * item.price }}</td>
</tr>
<tr>
<td colspan="3">合計</td>
<td>{{ totalPrice }}</td>
</tr>
</tbody>
</table>
</div>
</template>
<script>
export default {
data() {
return {
itemList: [
{ name: '商品1', qty: 2, price: 10 },
{ name: '商品2', qty: 3, price: 20 },
{ name: '商品3', qty: 1, price: 30 }
]
}
},
computed: {
totalPrice() {
return this.itemList.reduce((total, item) =>{
return total + item.qty * item.price;
}, 0);
}
}
}
</script>

在這個例子中，我們定義了一個itemList數(shù)組，其中包含了三個商品的數(shù)據(jù)。我們通過v-for指令遍歷這個數(shù)組，然后使用插值語法顯示每個商品的各個屬性。

在最后一行，我們使用v-for指令以及一個特殊的索引值$index來計算出所有商品的總額，并將這個總額顯示在表格的最后一行。

注意，在Vue中推薦使用計算屬性來計算合計值。這樣可以保持代碼的簡潔和可讀性。在這個例子中，我們定義了一個totalPrice計算屬性。這個屬性返回一個reduce方法的結(jié)果，通過這個方法可以計算出所有商品的總額。

總之，Vue提供了非常方便的計算合計值的方式，讓我們能夠輕松地在列表中顯示總額。如果你正在開發(fā)一個需要顯示列表的應(yīng)用程序，那么Vue的計算屬性可能會成為你的最佳朋友之一。