目录
根据所学的HTML结构及CSS样式,完成如图1所示的学生信息管理页面:
一、实验要求
1.掌握HTML基础知识的应用;
2.掌握Vue基本架构的应用;
3.掌握内容渲染指令的使用;
4.掌握事件绑定指令的使用;
5.掌握列表渲染指令的使用;
6.掌握双向数据绑定指令的使用;
7.实现一个学生信息管理页面。
二、具体功能点如下
①在学生信息录入系统中,完成“姓名”、“学号”、“年龄”、“性别”、“地址”字段的信息填写后,点击“创建学生信息”按钮,即可将填写字段的信息加载在学生信息列表的表格中,若任意一个字段未填写,则以弹窗的形式进行信息提示,如“学号”字段未填写,弹窗提示“学号不能为空!”
②在学生信息列表中,可以通过点击“年龄”的表头实现学生信息按照年龄信息升序排序操作;点击“删除”按钮可以删除所在行的学生信息;在搜索框中输入学生姓名,点击“搜索”按钮,在学生信息列表中仅显示被搜索学生的相关信息。