<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8">

		<title></title>

		<style type="text/css">

			p {

				display: none;

			}

			.red {

				background-color: #8B0000;

			}

			/* .box {

				width: 50px;

				height: 50px;

			} */

			.r {background-color: red;}

			.b {background-color: blue;}

			.g {background-color: green;}

			.active {background-color: darkred;}

		</style>

	</head>

	<body>

		<!-- 2、先有一下成绩单数据

		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 },

		]

		用table表格标签渲染以上数据，表格第一列是学生总分排名，最后一列是学生总分；

		3、还是采用上方相同的数据，采用相同的渲染规则，只渲染所有科目都及格了的学生。 -->

		<!-- 1、还是采用上方相同的数据，添加筛选规则：

			i）有三个按钮：语文、数学、外语，点击谁谁高亮，且当前筛选规则采用哪门学科

			ii）两个输入框，【】~【】，前面天最小分数，后面填最大分数，全部设置完毕后，表格的数据会被更新只渲染满足所有条件的结果

			举例：点击语文，输入【86】~【87】，那就只会渲染Jerry和Ben两条数据 -->

			<div id="app">

				<p v-for="v in scores">

					<!-- {{v.name}}的分数：

					math:{{ v.math }}

					chinese:{{v.chinese}}

					english:{{v.english}} -->

					{{v.math, v.chinese, v.english|fn(v.name)}}

				</p>

				<!-- <p v-for="i in result">

					{{i.name}}:{{i.grade}}

				</p> -->

				<div>成绩表：高亮的学生名字表示各科成绩及格<div>

				<hr>

				<table border="3" cellpadding="10">

					<thead>

						<tr>

							<th>排名</th>

							<th>学生名称</th>

							<th>数学成绩</th>

							<th>语文成绩</th>

							<th>英语成绩</th>

							<th>总分数</th>

						</tr>

					</thead>

					<tbody v-for="v,i in result">

						<tr>

							<td>{{i+1}}</td>

							<td class="red" v-if="is_pass === v.math > 60 & v.chinese >60 & v.english > 60">{{v.name}}</td>

							<td v-else="is_pass">{{v.name}}</td>

							<td>{{v.math}}</td>

							<td>{{v.chinese}}</td>

							<td>{{v.english}}</td>

							<td>{{v.grade}}</td>

						</tr>

					</tbody>

				</table>

				<hr>

				<!-- 第二题有bug -->

				<div>

				    <div>

						<input type="button" @click="page='r_page'" :class="{active:page === 'r_page'}" value="语文"  v-if="page === 'r_page'">

						<input type="button" @click="page='b_page'" :class="{active:page === 'b_page'}" value="数学">

						<input type="button" @click="page='g_page'" :class="{active:page === 'g_page'}" value="英语">

				        <!-- <button type="button" @click="page='r_page'" :class="{active:page === 'r_page'}">语文</button>&nbsp;&nbsp;

				        <input type="button" @click="page='b_page'" :class="{active:page === 'b_page'}">数学</button>&nbsp;&nbsp;

				        <button type="button" @click="page='g_page'" :class="{active:page === 'g_page'}">英语</button>&nbsp;&nbsp; -->

						<div v-if="page === 'r_page'" class="box r"></div>

						    <div v-else-if="page === 'b_page'" class="box b" ></div>

						    <div v-else class="box g"></div>

				    </div>

				</div>

			</div>

	</body>

	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

	<script type="text/javascript">

		var total_grade = [];

		let app = new Vue({

			el:'#app',

			data:{

				total:0,

				is_pass:true,

				page:'r_page',

				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 },

				]

			},

			filters:{

				fn(math,chinese,english,name){

					// console.log(a,b,c)

					let total = math + chinese + english

					// console.log(total_grade,total,name)

					this.total = total

					console.log(name,total_grade)

					total_grade.push({'name':name,'math':math,'chinese':chinese,'english':english,'grade':total})

					return total

				}

			},

			computed:{

				result(){

					for (let i=0;i<total_grade.length-1;i++){

					        for (j=0;j<total_grade.length-1-i;j++){

					            if (total_grade[j].grade > total_grade[j+1].grade){

					                let tmp = total_grade[j]

					                total_grade[j] = total_grade[j+1]

					                total_grade[j+1] = tmp

					            }

					        }

					    };

						return total_grade

				}

			},

		})

	</script>

</html>

day66作业的更多相关文章

  1. day66 模板小结 [母板继承,块,组件]

    小结: day65 1. 老师编辑功能写完 1. magic2函数 --> 用两层for循环解决 全栈8期之殇 问题 2. 模板语言 in 语法 {% if xx in xx_list %} { ...

  2. python10作业思路及源码：类Fabric主机管理程序开发（仅供参考）

    类Fabric主机管理程序开发 一,作业要求 1, 运行程序列出主机组或者主机列表(已完成) 2,选择指定主机或主机组(已完成) 3,选择主机或主机组传送文件(上传/下载)(已完成) 4,充分使用多线 ...

  3. SQLServer2005创建定时作业任务

    SQLServer定时作业任务:即数据库自动按照定时执行的作业任务,具有周期性不需要人工干预的特点 创建步骤:(使用最高权限的账户登录--sa) 一.启动SQL Server代理(SQL Server ...

  4. 使用T-SQL找出执行时间过长的作业

        有些时候,有些作业遇到问题执行时间过长,因此我写了一个脚本可以根据历史记录,找出执行时间过长的作业,在监控中就可以及时发现这些作业并尽早解决,代码如下:   SELECT sj.name , ...

  5. T-SQL检查停止的复制作业代理，并启动

        有时候搭建的复制在作业比较多的时候,会因为某些情况导致代理停止或出错,如果分发代理时间停止稍微过长可能导致复制延期,从而需要从新初始化复制,带来问题.因此我写了一个脚本定期检查处于停止状态的分 ...

  6. Python09作业思路及源码：高级FTP服务器开发（仅供参考）

    高级FTP服务器开发 一,作业要求 高级FTP服务器开发 用户加密认证(完成) 多用户同时登陆(完成) 每个用户有不同家目录且只能访问自己的家目录(完成) 对用户进行磁盘配额,不同用户配额可不同(完成 ...

  7. 个人作业week3——代码复审

    1.     软件工程师的成长 感想 看了这么多博客,收获颇丰.一方面是对大牛们的计算机之路有了一定的了解,另一方面还是态度最重要,或者说用不用功最重要.这些博客里好些都是九几年或者零几年就开始学习编 ...

  8. 个人作业-week2：关于微软必应词典的案例分析

    第一部分 调研,评测 评测基于微软必应词典Android5.2.2客户端,手机型号为MI NOTE LTE,Android版本为6.0.1. 软件bug:关于这方面,其实有一些疑问.因为相对于市面上其 ...

  9. 软件工程第二次作业——git的使用

    1. 参照 http://www.cnblogs.com/xinz/p/3803109.html 的第一题,每人建立一个GitHub账号,组长建立一个Project,将本组成员纳入此Porject中的 ...

随机推荐

  1. day15 python-03 列表，元组，字典

    Python之路,Day3 = Python基础3 注: extend: 拼接 enumerate:打印序号,返回两个值 模块的简单使用 sys模块 #!/usr/bin/env python #这句 ...

  2. web Magic报错 NoSuchMethodError NoSuchMethodError: com.google.common.util.concurrent.SimpleTimeLimiter

    webMagic使用selenium的时候遇到报错: java.lang.NoSuchMethodError: com.google.common.util.concurrent.SimpleTime ...

  3. goconvey测试模块

    一.介绍 是一款针对Golang的测试框架,可以管理和运行测试用例,同时提供了丰富的断言函数,并支持很多 Web 界面特性. GoConvey 网站 : http://smartystreets.gi ...

  4. 小程序唤起App

    小程序[打开App]官方文档 微信开放平台 App分享小程序IOS开发 App分享小程序Android开发

  5. AI入门---从破解AI开始

    我这里说的AI,并不是人工智能(Artificial Intelligence),只是Adobe illustrator.旁边有做设计的朋友,在他的指引下,对这个工具还颇感兴趣.就先下载个工具,闲暇时 ...

  6. 小程序跳坑 --- navigator 和 API中wx.系列的跳转(如 wx.navigateTo、wx.reLaunch等)

    工作之余,想着帮老妈开发个小程序,一是宣传一下她的业务,二是学习使用一下微信小程序的开发,哈哈.在此过程中遇到了navigator跳转的问题,最终还是成功解决了,下面就记录下来,并做个系列总结以作记录 ...

  7. IO初步，字节输入流和字节输出流

    字节输出流 OutputStream(基类,抽象) 特点:写任意的文件 方法:写出数据的方法:write write(int b) 写出1个字节 -128~127之间,写的是一个ASCLL码的值 wr ...

  8. HDU 1147 /// 判断两线段相交

    题目大意: 给定n条线段的端点 依次放上n条线段 判断最后在最上面(不被覆盖)的线段有哪些 到当前线段后 直接与之前保存的未被覆盖的线段判断是否相交就可以了 #include <cstdio&g ...

  9. 线性回归代码实现（matlab）

    1 代价函数实现(cost function) function J = computeCost(X, y, theta) %COMPUTECOST Compute cost for linear r ...

  10. 对倾斜的图像进行修正——基于opencv 透视变换

    这篇文章主要解决这样一个问题: 有一张倾斜了的图片(当然是在Z轴上也有倾斜,不然直接旋转得了o(╯□╰)o),如何尽量将它纠正到端正的状态. 而要解决这样一个问题,可以用到透视变换. 关于透视变换的原 ...