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,微信联系杨贵福. 凡描 ...
随机推荐
- 如何使用CAD删除命令？怎么删除图纸中线段
大家经常使用CAD制图软件来绘制图纸,那在绘制图纸的过程中有时候会出现一些问题,就是图纸中不小心多绘制了一个线段,那要怎么办呢?如何使用CAD删除命令?怎么删除图纸中线段呢?那下面小编就来教教大家具体 ...
- Spring 框架下的 JDBC
Spring JDBC Spring 对JDBC技术规范做了进一步封装,它又叫Spring JDBCTemplate(jdbc模板技术) 纯JDBC:代码清晰的.效率最高.代码是最烦的. Spr ...
- .netcore2.1 ef 使用外键关联查询
//实体类 [Table("invoiceinfo", Schema = "obs")] public class invoice { [Key] public ...
- urllib模块使用笔记
文中所有python代码均使用的是python2.7实现,与python3并不兼容. UrlLib模块 urllib模块是适用于一个简单的网络数据获取和处理(不能处理有关验证和cookie等功能),官 ...
- acwing 853. 有边数限制的最短路 模板
地址 https://www.acwing.com/problem/content/description/855/ 给定一个n个点m条边的有向图,图中可能存在重边和自环, 边权可能为负数. 请你求出 ...
- mysql 读写分离（手动和自动方法）
使用sqlalchemy 使mysq自动读写分离: 代码如下: from flask import Flask from flask_sqlalchemy import SQLAlchemy, Sig ...
- ASP.NET中的身份验证
身份验证方式windows passport form none授权allow 允许deny 拒绝特殊符号 *代表所有用户 ?代表匿名用户跳转配置<system.web><autho ...
- ASP.NET Core 3.0 使用 gRPC无法编译问题
一.问题 创建了gRPC项目后,编译发现报错: 二.解决 1.检查项目路径是否存在中文 2.检查当前Windows用户目录是否为非英文字符,如果是则必须改为英文 修改方法: https://jingy ...
- Python进阶二
文章目录 函数参数1.位置传递2.名称传递 def f(a,b): f(1,2) f(b=2,a=1) 3.可选参数传递(可选参数必须放在最后)def f(a,b=1) ✔def f(b=1,a) ❌ ...
- C#中获取指定路径下指定后缀名的所有文件的路径的list
场景 指定一个路径和后缀名,查找这个路径下所有以此后缀名结尾的文件. 注: 博客主页: https://blog.csdn.net/badao_liumang_qizhi关注公众号 霸道的程序猿 获取 ...