2025-01-08 旅行分帳應用程式-步驟10

發表於 更新於 分類於 閱讀次數：
2025-01-08 旅行分帳應用程式-步驟10

title: 2025-01-08 旅行分帳應用程式-步驟10

要在您的 Vue 旅遊分帳應用程式中新增「支出總計」功能，您可以使用 Vue 的計算屬性（computed）來自動計算所有支出的總和，並在模板中顯示。這樣可以確保每當支出資料變動時，總計會自動更新。

步驟一：新增計算屬性 totalAmount

在 <script setup> 區塊中，使用 computed 函數來定義一個新的計算屬性 totalAmount，該屬性會計算所有支出的總和：

1
2
3
4
5
import { computed } from 'vue'

const totalAmount = computed(() => {
  return expenses.value.reduce((sum, expense) => sum + expense.amount, 0)
})

這段程式碼使用 reduce 方法遍歷 expenses 陣列，將每筆支出的 amount 加總起來，並返回總和。

步驟二：在模板中顯示總計

在您的 <template> 區塊中，找到顯示支出清單的部分，並在清單下方新增一行來顯示總計：

1
2
3
4
5
6
7
8
9
10
<ul v-else>
  <li v-for="(expense, index) in expenses" :key="index">
    <strong>{{ expense.member }}</strong> 支出
    <strong class="amount">${{ Math.round(expense.amount) }}</strong> - {{ expense.category }}
    <button class="btn delete-btn" @click="deleteExpense(index)">❌</button>
  </li>
</ul>
<div class="total-section">
  <strong>總計：</strong> ${{ Math.round(totalAmount) }}
</div>

這段模板程式碼會在支出清單下方新增一個 div，顯示所有支出的總計金額。

步驟三：新增樣式（可選）

為了讓總計的顯示更清晰，您可以在 <style scoped> 區塊中新增以下樣式：

1
2
3
4
5
6
.total-section {
  margin-top: 10px;
  font-weight: bold;
  text-align: right;
  font-size: 1.1em;
}

這段 CSS 會將總計文字加粗、靠右對齊，並稍微放大字體，讓使用者更容易注意到。

完成以上步驟後，您的應用程式將會自動計算並顯示所有支出的總計金額，提升使用者體驗。