<!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. Navicat远程连接MySQL8，必知防坑策略

    项目上线是每一个开发工程师面临收获前面抓紧时间开发的成果,但有时我们上线项目首先需要做一些相关的业务测试.通过Xshell远程连接后使用命令行的方式连接操作Mysql这个没什么太大的你问题.但每次通过 ...

  2. 松软科技web课堂:JavaScript 布尔（逻辑）

    JavaScript 布尔(逻辑)代表两个值之一:true 或 false. 布尔值 通常,在编程中,您会需要只能有两个值之一的数据类型,比如 YES / NO ON / OFF TRUE / FAL ...

  3. VueUI -- iView4.0简单使用

    一.iView(View UI) 1.简介 官网:https://www.iviewui.com/ 仓库:https://github.com/view-design/ViewUI iView 与 V ...

  4. Angular（04）-知识点脑图

    点击左键 => 拖拽图片 => 新标签页查看图片 => 放大拖拽查阅

  5. docker升级步骤及注意事项

    centos系统默认安装的docker版本是1.13版本,在安装部分镜像时可能出现兼容问题,本文通过实际操作总结Docker升级最新版本步骤及可能出现的问题,供各位参考. 环境:CentOS Linu ...

  6. Java_map的key为自定义对象

    首先自定义Key对象 import lombok.AllArgsConstructor; import lombok.Getter; import lombok.Setter; import java ...

  7. 运维工程师必会工具(Nmap和TCPdump)

    1.NMap工具 主要功能:探测主机是否在线.扫描主机开放端口和嗅探网络服务,用于网络探测和安全扫描. NMap支持很多扫描技术,例如:UDP.TCPconnect().TCPSYN(半开扫描).ft ...

  8. 通过BGP实现流量劫持

    BGP BGP全称是Border Gateway Protocol,翻译成中文是边界网关协议,用于全球各个AS之间的路由.它的地位是毋庸置疑的,如果没有它就没有全球的因特网.因为全球各个AS都等价的维 ...

  9. git 文件补录和别名

    当git当前的版本要有部分忘记提交或新修改的东西包含在已提交(最近一次提交的版本)的版本时,我们可以进行文件补录 命令:git commit --amend -a 1.git log 查看最后一次提交 ...

  10. ES6 ES7 ES8 相关用法

    set Set作为ES6新的数据解构(类数组),它的成员都是唯一的,因为最直接的使用场景便是去重.并.差.交集的使用.它使用的算法叫做“Same-value-zero equality”,类似精确运算 ...