1. 清空
   -點及清除所有信息(v-on)
   Clear =>讓列表裡面的值全部清空lists=[]
   v-on click觸發

clear(){
    this.lists =[];
}

2. 隱藏
   -沒有值的時候，隱藏元素(v-show，v-if)

<footer class="footer" v-show="lists.length!=0">
<!--控制元素是否顯示，當待辦事項的列表長度不等於零時（即有項目存在）顯示 -->
<span class="todo-count">
    <strong>{{ lists.length }}</strong> 個項目  
    已完成 <strong>{{ completedCount() }}</strong> 個項目
    </span>
<button class="clear" @click="clear">Clear</button>  <!--清空-->
</footer>

3. 總結:
這個待辦事項清單的基本功能包括了新增待辦事項、刪除待辦事項、統計已完成項目數量以及清空所有待辦事項的功能。

• 資料(data)方面:
  • lists：存放了待辦事項的陣列，每個待辦事項包含標題和狀態
  • message：用來儲存使用者輸入的資料，包括標題和狀態。
• 方法(methods)方面：
  • add()：新增待辦事項到lists陣列中，並清空輸入框。
  • remove(index)：刪除特定索引的待辦事項。
  • completedCount()：統計已完成的項目數量。
  • clear():清空所有待辦事項。
    
    參考資料:
    https://www.bilibili.com/video/BV1HE411e7vY/?p=22&share_source=copy_web&vd_source=85a8c5bb37dc77d30860d2b3537de967
    https://www.bilibili.com/video/BV1HE411e7vY/?p=23&share_source=copy_web&vd_source=85a8c5bb37dc77d30860d2b3537de967