賽程進入後半段了，繼續加油
好的今天目標把代辦清單完成

建立功能
先到<script setup>區，將函式(功能)寫上去

// 切換完成狀態
function toggleTask(index) {
  tasks.value[index].done = !tasks.value[index].done
}

設定一個名為toggleTask的函式用來控制事項是否完成，接受參數index，index通常是陣列中項目的索引
tasks.value[index].done = !tasks.value[index].done 是一個取反的操作，切換事項「已完成」或「未完成」的狀態
tasks.value[index] 表示取得task陣列中指定索引的項目，.done控制該項目是否完成的布林值
= !tasks.value[index].done就是指將該布林值反轉

//刪除已完成的事項
function deleteTask(index) {
  tasks.value.splice(index, 1)
}

設定一個名為deleteTask的函式來執行刪除事項的動作，接收參數index,
tasks.value.splice(index, 1)執行刪除功能的主要程式，splice()可以用來新增、移除、取代元素，.splice(index, 1)表示移除在index的項目。

添加功能
接著到<template>將功能添加進去

<template>
  <div class= "container">
    <div class="box1"> </div>
    <div class="box2">
      <h1>代辦事項清單</h1>


      <!-- 輸入框 -->
      <div class="input-box">
        <input v-model="newTask" placeholder="輸入新的代辦事項..." @keyup.enter="addTask" />
        <button @click="addTask">新增</button>
      </div>


      <!-- 清單 -->
      <ul class="task-list">
        <li v-for="(task, index) in tasks" :key="index" :class="{ done: task.done }">
          <span @click="toggleTask(index)">{{ task.text }}</span>
          <button class="delete" @click="deleteTask(index)">刪除</button>
        </li>
      </ul>
      </div>
      <div class="box3"> </div>
  </div>
</template>

<ul>標籤是HTML的無序清單，通常包含多個<li>(清單項目)，這個無序清單套用名為task-list的樣式。
<li v-for="(task, index) in tasks" :key="index" :class="{ done: task.done }">
v-for="(task, index) in tasks利用迴圈指令v-for，根據陣列tasks產生多個<li>，task表示單一元素，index則是該元素的索引值。
:key="index用索引值當key可以提供識別值，能追蹤每個元素
:class="{ done: task.done }" 動態綁定class，語法為class=”{className: 條件}”，當條件為true時則套用該class。所以done是要套用的class名稱， task.done布林值是判斷條件
如果task.done為true就套用class done
如果task.done為false就不套用

<span @click="toggleTask(index)">{{ task.text }}</span>
點擊這個<span>時會呼叫並執行toggleTask(index)，{{ task.text }}則是將指定的task字串顯示在畫面上，呼叫toggleTask(index)切換完成或未完成的狀態，也決定 task.text 上是否會有刪除線。

<button class="delete" @click="deleteTask(index)">刪除</button>
建立一個按鈕並套用名為delet的css class，@click="deleteTask(index)"當點擊該按鈕時，呼叫並執行deleteTask(index)，刪除tasks陣列中第index筆資料

設定樣式
最後到<style scoped>區域設定好樣式

/* 清單 */
.task-list {
  width: 90%;
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.task-list li {
  background: white;
  margin: 6px 0;
  padding: 10px;
  border-radius: 6px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: 0.3s;
}

.task-list li span {
  cursor: pointer;
}

/* 完成的項目 */
.task-list li.done span {
  text-decoration: line-through;
  color: gray;
}

/* 刪除按鈕 */
.delete {
  background-color: #e74c3c;
  color: white;
  border: none;
  padding: 6px 10px;
  border-radius: 6px;
  cursor: pointer;
}
.delete:hover {
  background-color: #c0392b;
}

最終畫面長這樣

各位可以自行新增或刪除事項

好的我們的代辦事項清單大致完成，明天繼續，可能修改樣式或添加其他功能
各位明天見~