15.代办清单-清空、隐藏

清空
-点及清除所有信息(v-on)
Clear =>让列表里面的值全部清空lists=[]
v-on click触发

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

隐藏
-没有值的时候，隐藏元素(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