day66作业
<!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>
<input type="button" @click="page='b_page'" :class="{active:page === 'b_page'}">数学</button>
<button type="button" @click="page='g_page'" :class="{active:page === 'g_page'}">英语</button> -->
<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作业的更多相关文章
- day66 模板小结 [母板继承,块,组件]
小结: day65 1. 老师编辑功能写完 1. magic2函数 --> 用两层for循环解决 全栈8期之殇 问题 2. 模板语言 in 语法 {% if xx in xx_list %} { ...
- python10作业思路及源码：类Fabric主机管理程序开发（仅供参考）
类Fabric主机管理程序开发 一,作业要求 1, 运行程序列出主机组或者主机列表(已完成) 2,选择指定主机或主机组(已完成) 3,选择主机或主机组传送文件(上传/下载)(已完成) 4,充分使用多线 ...
- SQLServer2005创建定时作业任务
SQLServer定时作业任务:即数据库自动按照定时执行的作业任务,具有周期性不需要人工干预的特点 创建步骤:(使用最高权限的账户登录--sa) 一.启动SQL Server代理(SQL Server ...
- 使用T-SQL找出执行时间过长的作业
有些时候,有些作业遇到问题执行时间过长,因此我写了一个脚本可以根据历史记录,找出执行时间过长的作业,在监控中就可以及时发现这些作业并尽早解决,代码如下: SELECT sj.name , ...
- T-SQL检查停止的复制作业代理，并启动
有时候搭建的复制在作业比较多的时候,会因为某些情况导致代理停止或出错,如果分发代理时间停止稍微过长可能导致复制延期,从而需要从新初始化复制,带来问题.因此我写了一个脚本定期检查处于停止状态的分 ...
- Python09作业思路及源码：高级FTP服务器开发（仅供参考）
高级FTP服务器开发 一,作业要求 高级FTP服务器开发 用户加密认证(完成) 多用户同时登陆(完成) 每个用户有不同家目录且只能访问自己的家目录(完成) 对用户进行磁盘配额,不同用户配额可不同(完成 ...
- 个人作业week3——代码复审
1. 软件工程师的成长 感想 看了这么多博客,收获颇丰.一方面是对大牛们的计算机之路有了一定的了解,另一方面还是态度最重要,或者说用不用功最重要.这些博客里好些都是九几年或者零几年就开始学习编 ...
- 个人作业-week2：关于微软必应词典的案例分析
第一部分 调研,评测 评测基于微软必应词典Android5.2.2客户端,手机型号为MI NOTE LTE,Android版本为6.0.1. 软件bug:关于这方面,其实有一些疑问.因为相对于市面上其 ...
- 软件工程第二次作业——git的使用
1. 参照 http://www.cnblogs.com/xinz/p/3803109.html 的第一题,每人建立一个GitHub账号,组长建立一个Project,将本组成员纳入此Porject中的 ...
随机推荐
- CSS——优雅降级和渐进增强
什么是渐进增强(progressive enhancement).优雅降级(graceful degradation)呢? 渐进增强 progressive enhancement: 针对低版本浏览器 ...
- thinkphp 包含文件
在当前模版文件中包含其他的模版文件使用include标签,标签用法: <include file='模版表达式或者模版文件1,模版表达式或者模版文件2,...' /> 博智达直线电机价格 ...
- thinkphp 模板继承
模板继承是一项更加灵活的模板布局方式,模板继承不同于模板布局,甚至来说,应该在模板布局的上层.模板继承其实并不难理解,就好比类的继承一样,模板也可以定义一个基础模板(或者是布局),并且其中定义相关的区 ...
- BZOJ 1398: Vijos1382寻找主人 Necklace(最小表示法)
传送门 解题思路 最小表示法.首先对于判断是不是循环同构的串,直接扫一遍用哈希判即可.然后要输出字典序最小的就要用到最小表示法,首先可以把串复制一遍,这样的话就可以把串变成静态操作.如果对于两个位置\ ...
- vuecli脚手架+vue+vuex实现vue驱动的demo。
哎呀呀呀,现在大家都要会Vue || React,否则感觉跟这个前端的世界脱节了一样. start: vue-cli这个构建工具大大降低了webpack的使用难度,支持热更新,有webpack-de ...
- 使用WebStorm上传本地项目到GitHub和GitLab
在使用 WebStorm 上传本地项目到 GitHub 之前,先要做一些相关配置. 首先打开 WebStorm ,依次点击File -> Settings… 打开系统设置面板,在上面搜索 git ...
- IIS服务器不可用
很恼火,突然发现IIS中的应用程序不能浏览页面了,试了试任何一个aspx页面也打不开.重新用vs.net建立了个新的web应用程序,现象依旧. 电脑环境: win2003 问题现象: 1)当想浏览某个 ...
- 初识OpenCV-Python - 010: 精致边缘探测
本节主要介绍使用Canny函数达到边缘探测的结果. Code: import cv2from matplotlib import pyplot as plt img = cv2.imread('bal ...
- POJ 1696 /// 凸包
题目大意: 不能向左拐 不能重复走 就是求一个螺旋凸包 把已经是凸包内的点标记一下就行 因为凸包的性质 所有点都能走到 注意起点的选择 还有 反复求凸包的过程中边界的改变 #include <c ...
- MVC中利用ViewBag传递Json数据时的前端处理方法
用viewBag传递Json字符串到前端时,json字符串中的“会被转义为& quot,前端处理方法为@Html.Raw(Json.Encode(ViewBag.Data)),再用eval() ...