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,微信联系杨贵福. 凡描 ...
随机推荐
- 基于Git的数据库sql文件的管理——完美解决团队sql操作协同问题
目录 基于Git的数据库sql文件的管理--完美解决团队sql操作协同问题 1.产生背景 2.之前没用Git管理数据库出现的问题 2.1 用同一个库调试带来的问题 3.解决方案 3.1 Sql文件的创 ...
- JavaScript 自定义html元素鼠标右键菜单
自定义html元素鼠标右键菜单 实现思路 在触发contextmenu事件时,取消默认行为(也就是阻止浏览器显示自带的菜单),获取右键事件对象,来确定鼠标的点击位置,作为显示菜单的left和top值 ...
- Android项目实战之高仿网易云音乐创建项目和配置
这一节我们来讲解创建项目:说道大家可能就会说了,创建项目还有谁不会啊,还需要讲吗,别急听我慢慢到来,肯定有你不知道的. 使用项目Android Studio创建项目我们这里就不讲解了,主要是讲解如何配 ...
- 文本切换器（TextSwitcher）的功能与用法
TextSwitcher继承了ViewSwitcher,因此它具有与ViewSwitcher相同的特征:可以在切换View组件时使用动画效果.与ImageSwitcher相似的是,使用TextSwit ...
- Vue-Cli 3.0 中配置高德地图
vue 中使用高德地图有两种方式 一.vue-amap 组件 官网: https://elemefe.github.io/vue-amap/#/ 开始的时候是打算用这个组件做地图功能的,但是尝试之后存 ...
- 49-在 overlay 中运行容器
上一节我们创建了 overlay 网络 ov_net1,今天将运行一个 busybox 容器并连接到 ov_net1: 查看容器的网络配置: bbox1 有两个网络接口 eth0 和 eth1.eth ...
- 如何在Oracle 12C中添加多个分区 (Doc ID 1482456.1)
How to Add Multiple Partitions in Oracle 12C (Doc ID 1482456.1) APPLIES TO: Oracle Database - Enterp ...
- [Go] 轻量服务器框架全局配置的实现以及解析json
在一个应用中经常需要有一个配置文件,可以对代码中的参数进行配置,可以使用一个json文件来对应一个struct的对象,进行全局配置 建一个conf/zinx.json作为配置文件 { "Na ...
- linux 源设置
ubuntu 18.04.3 sudo cp /etc/apt/sources.list /etc/apt/sources.list.bak cat > /etc/apt/sources.lis ...
- 朝花夕拾《精通CSS》一、HTML & CSS 的基础
一.背景 翻出我4年前看的<精通CSS>一书,可惜当初没有整理读书笔记的习惯,最近又很少写前端,遂很多东西.知识点遗忘了,恰且现在 css 也有些变化和进步,遂一起打包整理,输出成几篇 b ...