Vue实现学生信息管理页面

目录

 一、实验要求

二、具体功能点如下

 三、代码实现

1.css代码

2.html代码

3.js代码

根据所学的HTML结构及CSS样式，完成如图1所示的学生信息管理页面:

 一、实验要求

1.掌握HTML基础知识的应用；

2.掌握Vue基本架构的应用；

3.掌握内容渲染指令的使用；

4.掌握事件绑定指令的使用；

5.掌握列表渲染指令的使用；

6.掌握双向数据绑定指令的使用；

7.实现一个学生信息管理页面。

二、具体功能点如下

      ①在学生信息录入系统中，完成“姓名”、“学号”、“年龄”、“性别”、“地址”字段的信息填写后，点击“创建学生信息”按钮，即可将填写字段的信息加载在学生信息列表的表格中，若任意一个字段未填写，则以弹窗的形式进行信息提示，如“学号”字段未填写，弹窗提示“学号不能为空！”

     ②在学生信息列表中，可以通过点击“年龄”的表头实现学生信息按照年龄信息升序排序操作；点击“删除”按钮可以删除所在行的学生信息；在搜索框中输入学生姓名，点击“搜索”按钮，在学生信息列表中仅显示被搜索学生的相关信息。

 三、代码实现