1.9　学生管理案例

本节通过学生管理案例，巩固v-for数据渲染、v-model双向数据绑定以及事件修饰符等知识点，案例效果如图1-18所示。

需求分析：此案例可拆分为4个功能。

（1）渲染学生列表。

（2）新增学生。

（3）删除学生。

（4）搜索学生。

1.9.1　渲染学生列表

渲染学生列表之前，首先需要布局静态页面，以下代码是视图层页面布局，完整代码可在配套资源中下载。

在M层模拟学生列表数据，代码如下。

模拟的学生列表数据为数组对象的形式，这也是后面项目实战中数据展现的形式，使用v-for指令将获取到的数据渲染到视图层，代码如下。

运行代码，可渲染出学生列表，如图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层代码如下。