Vue实现学生成绩计算页面

一、实验目的

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

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

3.掌握函数方法的定义及使用；

4.掌握methods方法的使用；

5.掌握computed计算属性的使用；

6.实现一个学生成绩计算页面。

二、实验步骤（及实验数据）

（1）在学生成绩录入系统中，完成“姓名”、“学号”、“课程一（HTML5应用开发）”、“课程二（JavaScript程序设计）”、“课程三（前端框架（Vue.js）应用开发）”字段的信息填写后，点击“添加学生成绩”按钮，即可将填写字段的信息加载在学生信息列表的表格中，若任意一个字段未填写，则以弹窗的形式进行信息提示，如“学号”字段未填写，弹窗提示“学号不能为空！”，“课程一（HTML5应用开发）”字段的值∈[0,100]，超过区间则弹窗提示“课程一（HTML5应用开发）输入的分数区间范围∉[0,100]！”

（2）在学生成绩列表中，具体功能如下：

①点击“显示课程三