Vue习题作业练习
作业一：
用table表格标签渲染以上数据，表格第一列是学生总分排名，最后一列是学生总分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<table border="1" style="margin: auto" rules="all">
<tr>
<th>排名</th>
<th>姓名</th>
<th>数学</th>
<th>语文</th>
<th>英语</th>
<th>总分</th>
</tr>
<!--有几个人就循环渲染几行-->
<tr v-for="(score,i) in scores">
<td>{{i+1}}</td>
<td v-for="v in score">{{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},
];
//这里需要注意一点：for in遍历的是取值关键字而for of遍历的是值
//添加总分
for (score of scores) {
score.total = score.math + score.chinese + score.english
}
//按照总分排序
//这里使用的是冒泡算法
for (let i = 0; i < scores.length - 1; i++) {
for (let j = 0; j < scores.length - 1 - i; j++) {
if (scores[j].total < scores[j + 1].total) {
let temp = scores[j];
scores[j] = scores[j + 1];
scores[j + 1] = temp
}
}
}
console.log(scores);
new Vue({
el: '#app',
data: {
//属性名与值为变量名的变量名相同的时候，可以简写省略值
scores,
}
})
</script>
</html>作业二：
还是采用上方相同数据，采用相同的渲染规则，只渲染所有科目都及格的学生
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<table border="1" style="margin: auto" rules="all">
<tr>
<th>排名</th>
<th>姓名</th>
<th>数学</th>
<th>语文</th>
<th>英语</th>
<th>总分</th>
</tr>
<!--有几个人就循环渲染几行-->
<tr v-for="(score,i) in scores" v-if="score.math>=60&&score.chinese>=60&&score.english>=60"> <!--其实就是多加了一个if判断-->
<td>{{i+1}}</td>
<td v-for="v in score">{{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},
];
//这里需要注意一点：for in遍历的是取值关键字而for of遍历的是值
//添加总分
for (score of scores) {
score.total = score.math + score.chinese + score.english
}
//按照总分排序
//这里使用的是冒泡算法
for (let i = 0; i < scores.length - 1; i++) {
for (let j = 0; j < scores.length - 1 - i; j++) {
if (scores[j].total < scores[j + 1].total) {
let temp = scores[j];
scores[j] = scores[j + 1];
scores[j + 1] = temp
}
}
}
console.log(scores);
new Vue({
el: '#app',
data: {
//属性名与值为变量名的变量名相同的时候，可以简写省略值
scores,
}
})
</script>
</html>作业三：采用相同的数据，添加筛选条件：
1、有三个按钮：数学，语文、外语，点击谁高亮，
2、两个输入框，【】~【】，前面小的分数，后面大分数，全部设置完毕，按照调钱筛选出对应的信息
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.active{
background-color: chocolate;
}
</style>
</head>
<body>
<div id="app">
<div style="width: 400px;margin: 20px auto;">
<button @click="subject='math'" :class="{active: subject==='math'}">数学</button>
<button @click="subject='chinese'" :class="{active: subject==='chinese'}">语文</button>
<button @click="subject='english'" :class="{active: subject==='english'}">英语</button>
<input type="number" min="0" max="100" v-model="min">
~
<input type="number" min="0" max="100" v-model="max">
</div>
<table border="1" style="margin: auto" rules="all">
<tr>
<th>排名</th>
<th>姓名</th>
<th>数学</th>
<th>语文</th>
<th>英语</th>
<th>总分</th>
</tr>
<tbody v-if="subject==='math'">
<tr v-for="(score,i) in scores" v-if="score.math>=min && score.math<=max ||(!min||!max)">
<td>{{i+1}}</td>
<td v-for="v in score">{{v}}</td>
</tr>
</tbody>
<tbody v-else-if="subject==='chinese'">
<tr v-for="(score,i) in scores" v-if="score.chinese>=min && score.chinese<=max ||(!min||!max)">
<td>{{i+1}}</td>
<td v-for="v in score">{{v}}</td>
</tr>
</tbody>
<tbody v-else-if="subject==='english'">
<tr v-for="(score,i) in scores" v-if="score.english>=min && score.english<=max ||(!min||!max)">
<td>{{i+1}}</td>
<td v-for="v in score">{{v}}</td>
</tr>
</tbody>
<tbody v-else=>
<tr v-for="(score,i) in scores">
<td>{{i+1}}</td>
<td v-for="v in score">{{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},
];
//这里需要注意一点：for in遍历的是取值关键字而for of遍历的是值
//添加总分
for (score of scores) {
score.total = score.math + score.chinese + score.english
}
//按照总分排序
//这里使用的是冒泡算法
for (let i = 0; i < scores.length - 1; i++) {
for (let j = 0; j < scores.length - 1 - i; j++) {
if (scores[j].total < scores[j + 1].total) {
let temp = scores[j];
scores[j] = scores[j + 1];
scores[j + 1] = temp
}
}
}
console.log(scores);
new Vue({
el: '#app',
data: {
//属性名与值为变量名的变量名相同的时候，可以简写省略值
scores,
min:'',
max:'',
subject:'',
}
})
</script>
</html>Vue习题作业练习的更多相关文章
- ECNU 计算机系统 (CSAPP) 教材习题作业答案集
这里是华东师范大学计算机系统的作业答案.由于几乎每一年布置的习题都几乎相同,网上的答案又比较分散,就把自己上学期提交的作业pdf放上来了,供参考. 长这样 Download Link:http://c ...
- python习题作业合集（持续更新……）
作业: 1.简述位,字节关系 2.请写出“天才”分别用utf-8和gbk编码所占位数 3.如果有一个变量num = 14,请使用int的方法,得到改变量最少可以用多少个二进制位表示 4.写代码,有如下 ...
- 《C++primer》v5 第1章 开始 读书笔记 习题答案
从今天开始在博客里写C++primer的文字.主要以后面的习题作业为主,会有必要的知识点补充. 本人也是菜鸟,可能有不对之处,还望指出. 前期内容可能会比较水. 1.1略 1.2略 1.3 cin和c ...
- C#【结对编程作业】小学数学习题助手
一.软件成品展示 软件本体下载(包括程序及其更新日志,源码工程包,UML图,API接口文档,算法介绍文档,算式计算excel实例,浅查重程序) 链接: http://pan.baidu.com/s/1 ...
- 機器學習基石(Machine Learning Foundations) 机器学习基石 作业三 课后习题解答
今天和大家分享coursera-NTU-機器學習基石(Machine Learning Foundations)-作业三的习题解答.笔者在做这些题目时遇到非常多困难,当我在网上寻找答案时却找不到,而林 ...
- 機器學習基石 机器学习基石（Machine Learning Foundations） 作业1 习题解答 （续）
这里写的是 习题1 中的 18 , 19, 20 题的解答. Packet 方法,我这里是这样认为的,它所指的贪心算法是不管权重更新是否会对train data有改进都进行修正,因为这里面没有 ...
- Linux系统管理----目录与文件管理作业习题
chapter02 - 03 作业 1. 分别用cat \tac\nl三个命令查看文件/etc/ssh/sshd_config文件中的内容,并用自己的话总计出这三个文档操作命令的不同之处? cat ...
- vue作业2
""" 2.现有以下成绩单数据 scores = [ { name: 'Bob', math: 97, chinese: 89, english: 67 }, { nam ...
- vue作业1
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- 2019牛客暑期多校训练营（第六场）-E Androgynos （构造题）
题目链接:https://ac.nowcoder.com/acm/contest/886/E 题意:给出n,求能否构造一个含n个顶点的简单无向图,且它的补图与它同构. 思路:首先要满足与其补图同构,同 ...
- 【转帖】赤壁之战，曹操大败只因缺了Service Mesh
赤壁之战,曹操大败只因缺了Service Mesh 本文作者把微服务向 Service Mesh 的进化融入到了三国故事中,妙趣横生.故事比较长,大家慢慢看,精彩的在后边. http://develo ...
- yaml语言格式
YAML是"YAML Ain't a Markup Language"(YAML不是一种标记语言),强调这种语言以数据做为中心,而不是以置标语言为重点. 转载2篇比较好的关于yam ...
- 【Python】【基础知识】【内置函数】【object的使用方法】
原英文帮助文档: class object Return a new featureless object. object is a base for all classes. It has the ...
- 什么是负载均衡SLB
负载均衡(Server Load Balancer)是对多台云服务器进行流量分发的负载均衡服务.负载均衡可以通过流量分发扩展应用系统对外的服务能力,通过消除单点故障提升应用系统的可用性. 请看视频简介 ...
- Codeforces Round #225 (Div. 1) C. Propagating tree dfs序+ 树状数组或线段树
C. Propagating tree Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/383/p ...
- dij 费用流
#include <bits/stdc++.h> using namespace std; typedef long long lld; const int MAXN = 50010, M ...
- curl put方式上传文件
发送端 <?php function curlPut($destUrl, $sourceFileDir, $headerArr = array(), $timeout = 10) { $ch = ...
- Java中的自动拆装箱（转）
出处: 一文读懂什么是Java中的自动拆装箱 本文主要介绍Java中的自动拆箱与自动装箱的有关知识. 基本数据类型 基本类型,或者叫做内置类型,是Java中不同于类(Class)的特殊类型.它们是我 ...
- X86逆向10：学会使用硬件断点
本节课我们将学习硬件断点的使用技巧,硬件断点是由硬件提供给我们的一组寄存器,我们可以对这些硬件寄存器设置相应的值,然后让硬件帮我们断在需要下断点的地址上面,这就是硬件断点,硬件断点依赖于寄存器,这些寄 ...