1.9 学生管理案例
本节通过学生管理案例，巩固v-for数据渲染、v-model双向数据绑定以及事件修饰符等知识点，案例效果如图1-18所示。
图1-18 学生管理效果图
需求分析：此案例可拆分为4个功能。
（1）渲染学生列表。
（2）新增学生。
（3）删除学生。
（4）搜索学生。
1.9.1 渲染学生列表
渲染学生列表之前，首先需要布局静态页面，以下代码是视图层页面布局，完整代码可在配套资源中下载。
在M层模拟学生列表数据，代码如下。
模拟的学生列表数据为数组对象的形式，这也是后面项目实战中数据展现的形式，使用v-for指令将获取到的数据渲染到视图层，代码如下。
运行代码，可渲染出学生列表，如图1-19所示。
图1-19 完成学生列表渲染
1.9.2 新增学生
需求分析如下。
（1）使用v-model获取到用户输入的学号、姓名，将时间设置为当前时间，无须用户输入。
（2）新增添加学生的方法，在方法中把用户输入的数据组织成一个对象。
（3）使用数组的push方法，把对象添加到list数组，代码如下。
1.9.3 删除学生
需求分析如下。
（1）给“删除”按钮添加单击事件并传入索引，只有传入索引才能确定要具体删除哪条数据，因为删除是a标签，使用事件修饰符将a标签的默认样式清除。
（2）使用数组的splice方法删除选中的数据，代码如下。
视图层代码如下。
删除事件代码如下。
1.9.4 搜索学生
需求分析如下。
（1）使用v-model获取用户输入的学生姓名。
（2）新增搜索方法，传入参数，参数就是用户输入的学生姓名。
（3）使用数组的forEach方法遍历整个数组，获取数组中的姓名包含用户传递参数的数据，并组成新的数组，代码如下。
视图层代码如下。
代码解析如下。
v-for将原先的“in list”修改成了“in search(keywords)”，其中，参数keywords没有加引号，说明是变量，Vue会到data数据中找keywords变量，而data中的keywords就是用户输入搜索的学生姓名。
M层代码如下。
