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

偏执的太偏执、 2023-09-25 20:23 20阅读 0赞

**目录**

任务描述：

效果图：

代码如下：

--------------------

## 任务描述： ##

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

## 效果图： ##

![a698240330fd45fcbb7f820a6d7b2c5a.jpeg][]

## 代码如下： ##

<head>
        ......
        <style>......</style>
    </head>
    
    <body>
    
        <div id="example">
            <h2>成绩表</h2>
            <label>姓名：</label><span>{
       {name}}</span>
            <label>性别：</label><span>{
       {sex}}</span>
            <label>年龄：</label><span>{
       {age}}</span>
            <div class="report">
                <div class="title">
                    <div>学期</div>
                    <div>数学</div>
                    <div>物理</div>
                    <div>化学</div>
                    <div>英语</div>
                    <div>语文</div>
                    <div>总分</div>
                </div>
                <div class="content" v-for="(grade,index) in grades">
                    <div>{
       {grade.term}}</div>
                    <div v-for="score in grade.scores">
                        <div>{
       {score}}</div>
                    </div>
                    <div>{
       {total(index)}}</div>
                </div>
            </div>
        </div>
        <script type="text/javascript">
            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;
                    }
                }
            })
        </script>
    </body>

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

[a698240330fd45fcbb7f820a6d7b2c5a.jpeg]: https://img-blog.csdnimg.cn/a698240330fd45fcbb7f820a6d7b2c5a.jpeg