day66test
作业
1. 先有一下成绩单数据
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表格标签渲染以上数据，表格第一列是学生总分排名，最后一列是学生总分；
思路：逻辑都在js模块中，用scores变量保存，然后对这个socres进行遍历，把stu对象中的各个数据进行相加，然后用一个数组把加完的数据存起来，用于在表格中展示。
在模板中通过循环将stu对象展示出来，先展示索引，再展示对应的值
先通过冒泡排序，把total排序好，然后再展示
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<table border="1" width="400" rules="margin:auto">
<tr>
<th>排名</th>
<th>姓名</th>
<th>数学</th>
<th>语文</th>
<th>英语</th>
<th>总分</th>
</tr>
<tr v-for="(stu,i) in scores">
<td>{{ i+1}}</td>
<td v-for="v in stu">{{ v}}</td>
</tr>
</table>
</div>
</body>
<script src="js/vue.js"></script>
<script>
let 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},
];
let total_scores = [];
for (stu of scores){
stu.total = stu.math + stu.chinese + stu.english;
total_scores.push(stu);
}
for (let i=0;i<total_scores.length-1;i++){
for (let j=0;j<total_scores.length-1-i;j++){
if (total_scores[j].total<total_scores[j+1].total){
let t=total_scores[j];
total_scores[j] = total_scores[j+1];
total_scores[j+1]=t;
}
}
}
console.log(total_scores);
new Vue({
el:'#app',
data:{
scores:total_scores,
}
});
</script>
</html>
2.用上面的数据，采用相同的渲染规则，只渲染所有科目都及格了的学生。
思路就是在for循环中加入一个if判断，将及格的数据都筛选出来展示
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<table border="1" width="400" rules="margin:auto">
<tr>
<th>排名</th>
<th>姓名</th>
<th>数学</th>
<th>语文</th>
<th>英语</th>
<th>总分</th>
</tr>
<!--添加筛选条件-->
<tr v-for="(stu,i) in scores" v-if="stu.math>60&&stu.chinese>60&&stu.english>60">
<td>{{ i+1}}</td>
<td v-for="v in stu">{{ v}}</td>
</tr>
</table>
</div>
</body>
<script src="js/vue.js"></script>
<script>
let 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},
];
let total_scores = [];
for (stu of scores){
stu.total = stu.math + stu.chinese + stu.english;
total_scores.push(stu);
}
for (let i=0;i<total_scores.length-1;i++){
for (let j=0;j<total_scores.length-1-i;j++){
if (total_scores[j].total<total_scores[j+1].total){
let t=total_scores[j];
total_scores[j] = total_scores[j+1];
total_scores[j+1]=t;
}
}
}
console.log(total_scores);
new Vue({
el:'#app',
data:{
scores:total_scores,
}
});
</script>
</html>
3.还是采用上方相同的数据，添加筛选规则：
i）有三个按钮：语文、数学、外语，点击谁谁高亮，且当前筛选规则采用哪门学科
ii）两个输入框，【】~【】，前面天最小分数，后面填最大分数，全部设置完毕后，表格的数据会被更新只渲染满足所有条件的结果
举例：点击语文，输入【86】~【87】，那就只会渲染Jerry和Ben两条数据
思路：
1、点击高亮
首先应该给一个类，这个类设置一个高亮样式，然后把类绑定给按钮，但是要给一个k-v形式的类，v用于控制这个类是否为true（是否起作用），再一个是把按钮绑定一个点击事件（包着一个含有参数的方法，这个方法就是用于判断前面的类的样式是否显示），所以一个逻辑过程，就是鼠标点击按钮，会把参数传到vue中，再把当前的rule进行设置，于是就可以将类（对应的css样式）展示出来
2、输入框，筛选数据
输入框绑定的v-model，控制input中的value，然后输出的数据是在第一种的基础上面，加了v-if（逻辑实现输入框没有数据或只有一个有数据就会展示全部学生数据，在区间内，存在的数据），会把满足筛选条件的数据展示出来。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.action {
background-color: pink;
}
</style>
</head>
<body>
<div id="app">
<p style="margin: 10px auto; width: 400px">
<button :class="{action: rule === 'chinese'}" @click="clickAction('chinese')">语文</button>
<button :class="{action: rule === 'math'}" @click="clickAction('math')">数学</button>
<button :class="{action: rule === 'english'}" @click="clickAction('english')">英语</button>
<input type="number" min="1" max="100" v-model="min">
~
<input type="number" min="1" max="100" v-model="max">
</p>
<table border="1" width="400" rules="all" style="margin: auto">
<tr>
<th>排名</th>
<th>姓名</th>
<th>数学</th>
<th>语文</th>
<th>英语</th>
<th>总分</th>
</tr>
<tbody v-if="rule === 'math'">
<tr v-for="(stu,i) in scores" v-if="(min && max && stu.math >= +min && stu.math <= +max) || (!min || !max)"> #
<td>{{ i + 1 }}</td>
<td v-for="v in stu">{{ v }}</td>
</tr>
</tbody>
<!--第一步是筛选是否有高亮按钮-->
<tbody v-else-if="rule === 'chinese'">
<!--第一个and筛选框是否空，第二个筛选是否有在输入框间的数据，第三个||筛选是否一个有数据，一个没有数据-->
<tr v-for="(stu,i) in scores" v-if="(min && max && stu.chinese >= +min && stu.chinese <= +max) || (!min || !max)">
<td>{{ i + 1 }}</td>
<td v-for="v in stu">{{ v }}</td>
</tr>
</tbody>
<tbody v-else-if="rule === 'english'">
<tr v-for="(stu,i) in scores" v-if="(min && max && stu.english >= +min && stu.english <= +max) || (!min || !max)">
<td>{{ i + 1 }}</td>
<td v-for="v in stu">{{ v }}</td>
</tr>
</tbody>
<tbody v-else>
<tr v-for="(stu,i) in scores">
<td>{{ i + 1 }}</td>
<td v-for="v in stu">{{ v }}</td>
</tr>
</tbody>
</table>
</div>
</body>
<script src="js/vue.js"></script>
<script>
let 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},
];
let total_scores = [];
for (stu of scores) {
stu.total = stu.math + stu.chinese + stu.english;
total_scores.push(stu);
}
for(let i = 0; i < total_scores.length - 1; i++) {
for(let j = 0; j < total_scores.length - 1 - i; j++) {
if (total_scores[j].total < total_scores[j+1].total) {
let t = total_scores[j];
total_scores[j] = total_scores[j+1];
total_scores[j+1] = t;
}
}
}
console.log(total_scores);
new Vue({
el: '#app',
data: {
scores: total_scores,
rule: '',
min: '',
max: '',
},
methods: {
clickAction(rule) {
this.rule = rule;
}
}
});
</script>
</html>
day66test的更多相关文章
随机推荐
- NEERC 2015 Adjustment Office /// oj25993
题目大意: 输入n,q: 矩阵大小为n*n 每个位置的值为该位置的行数+列数 接下来q行 “R m”表示输出第m行的总和并整行消去 “C m”表示输出第m列的总和并整列消去 Sample Input ...
- sparkStreaming结合sparkSql进行日志分析
package testimport java.util.Propertiesimport org.apache.spark.SparkConfimport org.apache.spark.Spar ...
- 笔记：使用Python解析JSON
使用Python解析JSON json是一种轻量级的数据交换格式,易于阅读和编写. json函数具体作用描述 函数 具体描述作用 json.dumps 将python对象编码为JSON字符串 json ...
- [Luogu2135] 方块消除【区间Dp】
Online Judge:P2135 方块消除(这题不用预处理) Label:区间Dp 题目描述 Jimmy最近迷上了一款叫做方块消除的游戏.游戏规则如下:n个带颜色方格排成一列,相同颜色的方块连成一 ...
- LR回放webservice脚本报错------------mmdrv.exe应用程序错误（未解决）
1.录制完成webservice脚本如下: 2.回放脚本,报错: 3.网上查看了一些解决办法,但都是没有起到作用.
- 2016.8.19上午初中部NOIP普及组比赛总结
2016.8.19上午初中部NOIP普及组比赛总结 链接:https://jzoj.net/junior/#contest/home/1338 这次总结发得有点晚啊!我在这里解释一下, 因为浏览器的问 ...
- 廖雪峰Java14Java操作XML和JSON-1XML-2DOM
XML是一种数据表示形式. 可以描述非常复杂的数据数据结构 用于传输和传输数据 DOM:Document Object Model DOM模型就是把XML文档作为一个树形结构,从根结点开始,每个节点都 ...
- C++ Builder获取系统文件的路径
取得路径的程序:(注意红色字体,由于博客显示问题,所以中间加了空格,大家自己把空格去掉即可) // -------------------------------------------------- ...
- Linux的CentOS上如何安装nginx
1. 安装nginx前,首先要装好gcc和g++环境: 2. 在centOS上装nginx,需要PCRE.zlib和ssl的支持,出ssl外其他都需要从其官网上下载好,上传至服务器: 3. 接着将上传 ...
- v-bind:class
<!DOCTYPE html> <html lang="zh"> <head> <title></title> < ...