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

最新推荐文章于 2024-03-31 13:56:35 发布

m0_56426418

最新推荐文章于 2024-03-31 13:56:35 发布

阅读量2.2k

点赞数 5

分类专栏： Vue 文章标签： vue.js html javascript 经验分享前端

本文链接：https://blog.csdn.net/m0_56426418/article/details/129846529

版权

Vue 专栏收录该内容

8 篇文章 1 订阅

订阅专栏

任务描述：

效果图：

代码如下：

任务描述：

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

效果图：

代码如下：

<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>

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