<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>作业</title>
</head>
<body>
<div id="app">
    <h1 class="text-center">学生成绩总分排名表</h1>
    <table class="table table-hover">
        <thead>
        <tr>
            <th>姓名</th>
            <th>数学</th>
            <th>语文</th>
            <th>英语</th>
            <th>总分</th>
        </tr>
        </thead>
        <tbody>

        <tr v-for="dic in order_scores">
            <th>{{ dic['name'] }}</th>
            <th>{{ dic['math'] }}</th>
            <th>{{ dic['chinese'] }}</th>
            <th>{{ dic['english'] }}</th>
            <th>{{ dic['math']+dic['chinese']+dic['english'] }}</th>
        </tr>
        </tbody>
    </table>

    <h1 class="text-center">学生成绩及格表</h1>
    <table class="table table-hover">
        <thead>
        <tr>
            <th>姓名</th>
            <th>数学</th>
            <th>语文</th>
            <th>英语</th>
            <th>总分</th>
        </tr>
        </thead>
        <tbody>

        <tr v-for="dic in pass_score">
            <th>{{ dic['name'] }}</th>
            <th>{{ dic['math'] }}</th>
            <th>{{ dic['chinese'] }}</th>
            <th>{{ dic['english'] }}</th>
            <th>{{ dic['math']+dic['chinese']+dic['english'] }}</th>
        </tr>
        </tbody>
    </table>

    <h1 class="text-center">学生成绩查询表</h1>
    <p>
        <button type="button" @click="subject('math')">数学</button>
        <button type="button" @click="subject('chinese')">语文</button>
        <button type="button" @click="subject('english')">英语</button>
    </p>
    <p>请输入分数
        <input type="number" v-model="start" min="0" max="100">~
        <input type="number" v-model="end" min="0" max="100">
    </p>
    <table class="table table-hover">
        <thead>
        <tr>
            <th>姓名</th>
            <th :style="{backgroundColor: math}">数学</th>
            <th :style="{backgroundColor: chinese}">语文</th>
            <th :style="{backgroundColor: english}">英语</th>
            <th>总分</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="dic in scores">
            <th>{{ dic['name'] }}</th>
            <th :style="{backgroundColor: math}">{{ dic.math }}</th>
            <th :style="{backgroundColor: chinese}">{{ dic.chinese }}</th>
            <th :style="{backgroundColor: english}">{{ dic.english }}</th>
            <th>{{ dic['math']+dic['chinese']+dic['english'] }}</th>
        </tr>
        </tbody>
    </table>
</div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            scores: [
                {name: 'Bob', math: 97, chinese: 89, english: 67},
                {name: 'Tom', math: 67, chinese: 52, english: 98},
                {name: 'Jerry', math: 72, chinese: 87, english: 89},
                {name: 'Ben', math: 92, chinese: 87, english: 59},
                {name: 'Chan', math: 47, chinese: 85, english: 92},
            ],

            english: "",
            chinese: "",
            math: "",

            start: '',
            end: '',

            page: ''

        },
        methods: {
            subject(sub) {
                if (sub === "math") {
                    this.math = "red";
                    this.english = '';
                    this.chinese = '';
                } else if (sub === "english") {
                    this.english = "red";
                    this.math = "";
                    this.chinese = "";
                } else {
                    this.math = '';
                    this.english = '';
                    this.chinese = "red";
                }

            }
        },
        computed: {
            order_scores: function () {
                let arr = this.scores;

                for (let i = 0; i < arr.length; i++) {
                    for (let j = 0; j < arr.length - 1; j++) {
                        let sum1 = arr[j].math + arr[j].chinese + arr[j].english;
                        let sum2 = arr[j + 1].math + arr[j + 1].chinese + arr[j + 1].english;
                        if (sum1 < sum2) {
                            let temp = arr[j + 1];
                            arr[j + 1] = arr[j];
                            arr[j] = temp;
                        }
                    }
                }
                return arr
            },

            pass_score: function () {
                let arr = this.scores;
                let arr1 = [];
                for (let i = 0; i < arr.length; i++) {
                    if (arr[i].math >= 60 && arr[i].chinese >= 60 && arr[i].english >= 60) {
                        arr1[i] = arr[i]
                    }
                }

                return arr1
            },
        }

    })
</script>
</html>

day（66）作业的更多相关文章

  1. C 语言学习 第12次作业总结

    作业总结 本次课堂的内容为字符串相关的几个函数还有结构体. 字符串相关函数 在此之前的课程中,输入主要都是使用scanf这个函数.而在这节课上,冯老师讲解了字符串获取函数gets.在不需要控制符的情况 ...

  2. python之路第二篇（基础篇）

    入门知识: 一.关于作用域: 对于变量的作用域,执行声明并在内存中存在,该变量就可以在下面的代码中使用. if 10 == 10: name = 'allen' print name 以下结论对吗? ...

  3. SpringBoot-ElasticJob封装快速上手使用(分布式定时器)

    elastic-job-spring-boot qq交流群:812321371 1 简介 Elastic-Job是一个分布式调度解决方案,由两个相互独立的子项目Elastic-Job-Lite和Ela ...

  4. C语言学习 第九次作业总结

    本次作业练习的内容是二维数组.下面我先简单的说下二维数组的基本知识点: 二维数组其实这个中文概念颇有误导--会让人感觉这是一个两个维度的概念.所以很多的国外的C语言书籍上会称这种数组为多下标数组:即首 ...

  5. C语言学习 第七次作业总结

    C语言学习 第七次作业总结 数组可以分为数组和多下标数组(在传统的国内C语言书本中,将其称为二/多维数组). 数组名称 在之前的课程中,大家应该都有印象,对于int a这样的定义,会为变量 a 声明一 ...

  6. 耿丹CS16-2班课堂测试作业汇总

    Deadline: 2016-11-01 11:59 作业内容 课堂测试作业总结 00.题目得5分,多半扣在格式上,有些同学代码写得很过分,已经很仁慈对待,同学们珍惜之: 01.界面设计得分不好,换行 ...

  7. SQL SERVER 中如何用脚本管理作业

    在SQL SERVER中用脚本管理作业,在绝大部分场景下,脚本都比UI界面管理作业要高效.简洁.打个简单的比方,如果你要查看作业的运行时长,如果用UI界面查看,100个作业,你就得在历史记录里面至少查 ...

  8. Python学习day3作业

    days3作业 作业需求 HAproxy配置文件操作 根据用户输入,输出对应的backend下的server信息 可添加backend 和sever信息 可修改backend 和sever信息 可删除 ...

  9. 作业成绩 final-review 20161201-1203 15:05

    final-review阶段,20161201-20161203 15:05 final 评论II截止 20161204 09:00 申诉截止时间 20161207 12:00,微信联系杨贵福. 凡描 ...

随机推荐

  1. DotNet Core中使用dapper

    我们都知道,ORM全称是,Object Relationship Mapper,即,对象关系映射.也就是可以用object来map我们的db,而且市面上的orm框架有很多,其中有一个框架叫做dappe ...

  2. 利用 uDig 生成 GeoServer 可用的 SLD 渲染文件

    利用 uDig 生成 GeoServer 可用的 SLD 渲染文件 uDig简介 uDig是一个 open source (EPL and BSD) 桌面应用程序框架,构建在Eclipse RCP和G ...

  3. 百度地图API 拖拽或点击地图位置获取坐标

    function setPlace(map,myValue,callback){ function getAddress(){ var pp = local.getResults().getPoi(0 ...

  4. MySQL数据库：运算符

    运算符 比较运算符: > 大于 < 小于 >= 大于等于 <= 小于等于 = 等于 != 不等于 范围运算符: between...and...(包含边界值) 类似于 > ...

  5. Tornado—接口调用时方法执行顺序

    import tornado.web # web服务 import tornado.ioloop # I/O 时间循环 class MainHandler(tornado.web.RequestHan ...

  6. 2019-2020-1 20199305《Linux内核原理与分析》第十一周作业

    ShellShock 攻击实验 (一)何为ShellShock? 2014年9月24日,Bash中发现了一个严重漏洞shellshock,该漏洞可用于许多系统,并且既可以远程也可以在本地触发,这项漏洞 ...

  7. SQL Server 索引分析开关

    set statistics io onset statistics profile on

  8. (绿色)修正版gooflow流程解决方案(源码分享+在线演示+UI地址下载)

    gooflow出现挖矿机木马,请勿随意去其他网站下载!!! 一.功能简介 gooflow功能清单1.自定义流程绘制2.自定义属性添加3.支持3种步骤类型普通审批步骤自动决策步骤手动决策步骤 4.决策方 ...

  9. 集合系列 Set（七）：LinkedHashSet

    LinkedHashSet 继承了 HashSet,在此基础上维护了元素的插入顺序. public class LinkedHashSet<E> extends HashSet<E& ...

  10. vsftpd服务的基本配置

    本文环境:CentOS 7 简介 FTP(文件传输协议,File Transfer Protocol)是最古老的协议之一,诞生于1971年,距今已经半个世纪了,它的目的是在不同计算机之间传输文件(实现 ...