Vue.js实现个人成绩单功能（学期、成绩的展示和总分的计算）

目录

任务描述：

效果图：

代码如下：

任务描述：

通过循环数组展示成绩信息。

效果图：

代码如下：

    ......
    ......


    
        
成绩表
        姓名：{{name}}
        性别：{{sex}}
        年龄：{{age}}
        
            
                学期
                数学
                物理
                化学
                英语
                语文
                总分
            
            
                {{grade.term}}
                
                    {{score}}
                
                {{total(index)}}
            
        
    
    
        var exam = new Vue({
            el: '#example',
            data: {
                name: 'zhangsan',
                sex: '男',
                age: 20,
                grades: [{
                    term: '第一学期',
                    scores: {
                        math: 90,
                        physics: 85,
                        chemistry: 95,
                        english: 86,
                        computer: 96
                    }
                }, {
                    term: '第二学期',
                    scores: {
                        math: 92,
                        physics: 83,
                        chemistry: 90,
                        english: 88,
                        computer: 95
                    }
                }]
            },
            methods: {
                total: function (index) {
                    var total = 0;
                    var obj = this.grades[index].scores;
                    for (var i in obj) {
                        total += obj[i];
                    }
                    return total;
                }
            }
        })
    

制作不易，三连走起！！！