在日常生活中，人们通常倾向于对生活和工作进行提前规划，这样可以更合理地对时间进行划分，从而提高效率。本节将通过讲解待办事项案例，使读者巩固所学的Vue中组件的使用、数据共享等知识点。

1. 初始页面效果

“待办事项”案例的页面结构分为上、中、下3个部分，上半部分为输入区域，中部为列表区域，下半部分为任务状态区域。

2. 新增任务

在文本框中输入内容后，在键盘上按下回车键，即可添加任务到待办列表中，添加“完成Vue.js第2章课后题”任务后的页面效果如下图所示。

3. 删除任务

当鼠标指针移入列表区域中“晨练”任务时，页面效果如下图所示。

单击“晨练”任务右侧的“×”按钮，即可删除该任务。

4. 切换任务状态

在本案例中，任务状态分为全部任务、待办任务、已办任务3种。单击待办任务前的复选框，即可将待办任务状态改为已完成，并将该任务添加到已办任务中。

5. 展示任务数的条数

在任务状态区域左侧会展示任务的总条数。

6. 切换任务列表

单击任务状态区域的“All”“Active”“Completed”分别会切换到全部任务、待办任务、已办任务列表。默认情况下，任务状态区域会展示全部任务。

待办任务列表如下图所示。

7. 切换任务列表

已办任务列表如下图所示。