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,微信联系杨贵福. 凡描 ...
随机推荐
- WPF无边框可拖动窗体
下面主要记录下创建无边框窗体,并且可以拖动.这种窗体主要用于弹出小窗体时. <Window x:Class="WpfApplication1.MainWindow" xmln ...
- Ubuntu 创建 Pycharm 桌面快捷方式
1. 安装 Pycharm,我的运行目录是: /opt/pycharm-/bin 2. 在 /usr/share/applications/ 下创建文件 pycharm.desktop [Deskto ...
- ORDER BY导致索引使用不理想
在MySQL中经常出现未按照理想情况使用索引的情况,今天记录一种Order by语句的使用导致未按预期使用索引的情况. 1. 问题现象 1.1 SQL语句: SELECT DISTINCT p.* ...
- MATLAB聚类有效性评价指标（外部 成对度量）
MATLAB聚类有效性评价指标(外部 成对度量) 作者:凯鲁嘎吉 - 博客园 http://www.cnblogs.com/kailugaji/ 更多内容,请看:MATLAB: Clustering ...
- springboot之jpa的支持
1.springboot之jpa支持 2.Springboot+bootstrap界面版之增删改查及图片上传 springboot之jpa支持 导入相关pom依赖 <dependency> ...
- github二级域名配置
首先打开GitHub并登上你的GitHub账号 新建仓库 点击settings 接下来就是操作git往这个仓库存文件,该域名会访问index.html文件
- [译]Vulkan教程(26)描述符池和set
[译]Vulkan教程(26)描述符池和set Descriptor pool and sets 描述符池和set Introduction 入门 The descriptor layout from ...
- [译]Vulkan教程(03)开发环境
[译]Vulkan教程(03)开发环境 这是我翻译(https://vulkan-tutorial.com)上的Vulkan教程的第3篇. In this chapter we'll set up y ...
- java之匿名内部类
Person.java package insof; public class Person extends Object{ String name; static int age; public P ...
- ES&IK环境搭建
本来打算docker安装es,和腾讯云上的服务器相比,一台赤裸裸的本地机,甚至连很多基础的指令都没有,还花样各种报错,对于我这种新手来说简直了,百度啊cddn啊终于整出来了,记录一下: 一:安装依赖 ...