基于Vue的简单成绩管理系统

1、整体框架

   

      

        

          

            

              
编号
              
科目
              
成绩
              
操作
            
          
          

            

              
{{index+1}}
              
{{item.subject}}
              
{{item.score}}
              
删除
            
          
          

            

              

                暂无数据
              
            
          
          

            

              

                总分：{{sumscore}}
                平均分：{{avgscore}}
              
            
          
        
      
      

        

          
科目：
          

            
          
        
        

          
分数：
          

            
          
        
        

          

          

            添加
          
        
      
    

2、

3、页面整体效果图

4、具体功能展示

（1）成绩列表展示

使用 Vue 的 v-for 指令循环渲染 list 数组中的每一项数据。

每行数据包含：编号：通过 index + 1 动态生成。科目：显示 item.subject。成绩：显示 item.score，并且当成绩小于60分时，通过 :class="{red: item.score < 60}" 将成绩显示为红色。

最后还提供一个“删除”按钮，点击后调用 del 方法删除对应的成绩记录。

     
              {{index+1}}
              {{item.subject}}
              {{item.score}}
              删除
            

（2）成绩添加功能

表单包含两个输入框：

科目：绑定到 `subject` 数据属性，通过 `v-model` 实现双向绑定。

分数：绑定到 `score` 数据属性，通过 `v-model.number` 实现双向绑定，并确保输入的是数字。

并提供一个“添加”按钮，点击或按下回车键时调用 `add` 方法。

   

        

          
科目：
          

            
          
        
        

          
分数：
          

            
          
        
        

          

          

            添加
          
        
      

在 `add` 方法中：检查 `subject` 和 `score` 是否为空，如果不为空，则将新记录（包含唯一 `id`、科目和分数）添加到 `list` 数组中，最后清空输入框，以便下一次输入。

add() {
            if (this.subject.trim() !== "" && this.score !== "") {
              this.list.push({id: +new Date(), subject: this.subject, score: this.score})
              this.subject = ''
              this.score = ''
            } else {
              return null
            }
          }
        }

（3）成绩删除功能

每行数据的“操作”列中有一个“删除”按钮，点击时调用 `del` 方法。

    删除

在 `del` 方法中，通过 `filter` 方法过滤掉指定 `id` 的记录，从而实现删除功能。

del(id) {
            this.list = this.list.filter(item => item.id !== id)
          }

（4）总分和平均分计算

使用 Vue 的 `computed` 属性：

 `sumscore`：通过 `reduce` 方法累加所有成绩的分数。

`avgscore`：通过总分除以成绩数量计算平均分。如果成绩列表为空，则平均分显示为0。

 computed: {
          sumscore() {
            return this.list.reduce((sum,item) => sum + item.score,0)
          },
          avgscore() {
            return this.sumscore / this.list.length > 0 ? this.sumscore / this.list.length : 0
          }
      }

在表格的 `` 中显示总分和平均分

         
            
              
                总分：{{sumscore}}
                平均分：{{avgscore}}
              
            
          

（5）其他细节功能

当成绩列表为空时，显示“暂无数据”的提示，且会隐藏掉总分和平均分。

使用 `v-show` 指令根据 `list.length` 的值动态显示提示信息：

            
              
                暂无数据
              
            

              
                总分：{{sumscore}}
                平均分：{{avgscore}}
              

相关js文件和css文件，以及项目源码已上传