12-综合案例- 分数查询

需求说明:

        1. 渲染功能(不及格高亮)

                v-if v-else  v-for  v-bind:class

        2. 删除功能

                点击传参, filter过滤覆盖原数组

                .prevent 阻止默认行为

        3. 添加功能

                v-model v-model修饰符(.trim  .number)

                unshift 修改数组更新视图

        4. 统计总分,求平均分

                计算属性 reduce求和

    
    
    
    




    

        

            

                

                    

                        
编号
                        
科目
                        
成绩
                        
操作
                    
                
                
                

                    

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

                    
                

                

                    

                        

                            暂无数据
                        
                    
                
                

                    

                        
                        

                            总分: {{ totalScore }}
                            平均分数: {{ averageScore }}
                        
                    
                
            
        

        

            
            

                
科目:
                

                    
                
            
            

                
分数:
                

                    
                
            
            

                

                

                    添加