day（66）作业
<!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）作业的更多相关文章
- C 语言学习 第12次作业总结
作业总结 本次课堂的内容为字符串相关的几个函数还有结构体. 字符串相关函数 在此之前的课程中,输入主要都是使用scanf这个函数.而在这节课上,冯老师讲解了字符串获取函数gets.在不需要控制符的情况 ...
- python之路第二篇（基础篇）
入门知识: 一.关于作用域: 对于变量的作用域,执行声明并在内存中存在,该变量就可以在下面的代码中使用. if 10 == 10: name = 'allen' print name 以下结论对吗? ...
- SpringBoot-ElasticJob封装快速上手使用(分布式定时器)
elastic-job-spring-boot qq交流群:812321371 1 简介 Elastic-Job是一个分布式调度解决方案,由两个相互独立的子项目Elastic-Job-Lite和Ela ...
- C语言学习 第九次作业总结
本次作业练习的内容是二维数组.下面我先简单的说下二维数组的基本知识点: 二维数组其实这个中文概念颇有误导--会让人感觉这是一个两个维度的概念.所以很多的国外的C语言书籍上会称这种数组为多下标数组:即首 ...
- C语言学习 第七次作业总结
C语言学习 第七次作业总结 数组可以分为数组和多下标数组(在传统的国内C语言书本中,将其称为二/多维数组). 数组名称 在之前的课程中,大家应该都有印象,对于int a这样的定义,会为变量 a 声明一 ...
- 耿丹CS16-2班课堂测试作业汇总
Deadline: 2016-11-01 11:59 作业内容 课堂测试作业总结 00.题目得5分,多半扣在格式上,有些同学代码写得很过分,已经很仁慈对待,同学们珍惜之: 01.界面设计得分不好,换行 ...
- SQL SERVER 中如何用脚本管理作业
在SQL SERVER中用脚本管理作业,在绝大部分场景下,脚本都比UI界面管理作业要高效.简洁.打个简单的比方,如果你要查看作业的运行时长,如果用UI界面查看,100个作业,你就得在历史记录里面至少查 ...
- Python学习day3作业
days3作业 作业需求 HAproxy配置文件操作 根据用户输入,输出对应的backend下的server信息 可添加backend 和sever信息 可修改backend 和sever信息 可删除 ...
- 作业成绩 final-review 20161201-1203 15:05
final-review阶段,20161201-20161203 15:05 final 评论II截止 20161204 09:00 申诉截止时间 20161207 12:00,微信联系杨贵福. 凡描 ...
随机推荐
- jQuery仿京东首页广告图片切换图片轮播
1.效果图如下: 2.源码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charse ...
- Centos7 基于SVN+Apache+IF.svnadmin实现web管理
1.简单介绍: iF.SVNAdmin应用程序是您的Subversion授权文件的基于Web的GUI.它基于PHP 5.3,需要安装一个Web服务器(Apache).该应用程序不需要数据库后端或任何类 ...
- sqlldr bat遇到的问题
在编写sqlldr相关的bat脚本时,遇到执行bat后一直循环执行的问题,网上也有遇到相同问题的朋友: 链接:https://zhidao.baidu.com/question/17039912443 ...
- 《Web Development with Go》Middleware之共享数据
这个库值得学, 好像写起来越来越溜 package main import ( "fmt" "log" "net/http" //" ...
- mysql数据库基础SQL语句总结篇
常用的sql增删改查语句 创建数据库:create database db_name character set utf8;删除数据库:drop database db_name;切换数据库:use ...
- C++ explicit关键字，修饰构造函数，ctor
#include <iostream> // operator Type() 类型操作符重载 // operator int() // operator double() // ... / ...
- 高阶组件&&高阶函数(一)
antd里面的form表单方面,遇到一个高阶函数,以及高阶组件,于是看了一下这方面内容,前辈们的文章写得也非常详细,这里就稍微kobe一下 高阶函数与高阶组件 高阶函数: 高阶函数,是一种特别的函数, ...
- [译]Vulkan教程(12)图形管道基础之入门
[译]Vulkan教程(12)图形管道基础之入门 Introduction 入门 Over the course of the next few chapters we'll be setting u ...
- doc 如何在指定的位置打印字符和颜色
编程:在屏幕中间分别显示绿色,绿底红色,白底蓝色的字符串weclome to masm! B8000H~BFFFFH共32KB 的空间,为80*25彩色字符模式的显示缓冲区. 在80*25彩色字符模式 ...
- Jmeter正则提取请求响应数据
前言 在测试时,我们经常需处理请求返回的响应数据,比如很多时候 cookie 或 token 或 Authorization授权码 会返回在 Response headers(响应头)中,这时我们便需 ...