14.代办清单-删除、统计

点击删除指定内容(v-on splice索引)splice方法的使用
当我们点击某个待办事项的删除按钮时，remove方法将被调用，并将该待办事项从lists里面移除，从而实现删除操作。

<section>    <ul class="todo">        <li v-for="(item, index) in lists" :key="index">            <label>              <input type="checkbox" v-model="item.todo">              {{ index + 1 }} / {{ item.title }}             </label>             <button class="delect" @click="remove(index)">x</button>             <!--  当按下删除按钮时，会呼叫remove方法并传递相应的索引。  -->         </li>    </ul></section>

在methods中加入移除功能:

 remove(index){     this.lists.splice(index,1);     //splice方法可以藉由删除既有元素并／或加入新元素来改变一个阵列的内容。     //从 lists 数组中删除指定索引的项目}

3. 统计信息个数(v-text length)
-总项目数量：这表示待办事项清单中所有项目的总数。
-已完成的项目数量：这表示在待办事项清单中已经被标记为完成的项目的数量。

 <section>        <!-- 统计 -->     <footer class="footer" >        <span class="todo-count">            <strong>{{ lists.length }}</strong> 个项目              已完成 <strong>{{ completedCount() }}</strong> 个项目        </span>     </footer> </section>

在methods中加入统计功能:

 completedCount(){     return this.lists.filter(item => item.todo).length;     }//将经指定的函式运算后，由原阵列中通过该函式检验的元素回传一个新阵列。      //index数组中当前正在处理的元素的索引。array阵列filter()被调用。

参考资料:
https://www.bilibili.com/video/BV1HE411e7vY/?p=20&share_source=copy_web&vd_source=85a8c5bb37dc77d30860d2b3537de967
https://www.bilibili.com/video/BV1HE411e7vY/?p=21&share_source=copy_web&vd_source=85a8c5bb37dc77d30860d2b3537de967