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 ...
随机推荐
- day30 OSI七层协议
网络编程 什么是网络编程? 网络编程就是编写基于网络传输数据的应用程序 为什么需要网络编程? 在我们以前的编程中,所有的数据都是存在于本地,且只能由我们自己使用,不能进行跨电脑通讯,但是在实际的生活中 ...
- Shortest Distance from All Buildings
You want to build a house on an empty land which reaches all buildings in the shortest amount of dis ...
- linux常用终端命令（三）用户和权限
三.用户权限相关命令 用户 和 权限的基本概念 用户管理 终端命令 组管理 终端命令 修改权限 终端命令 1.用户和权限的基本概念 1.1.基本概念 用户管理包括 用户 与 组 管理 linux系统中 ...
- 购物车以php原生cookie实现
index.php //入口文件 <?php /** * @name index.php * @decs * @author 老猫 <18368091722@163.com> * U ...
- 大数据学习（3）- redis集群
安装方法摘自 http://www.redis.cn/topics/cluster-tutorial.html 这个方法为简单版的方法,在原文的基础上,我加了一点参数,其他参数配置可以请教其他大神 搭 ...
- How to enable remote connections to SQL Server
<img src="https://miro.medium.com/max/1400/1*18lrHvJ8YtADJDT7hxIThA.jpeg" class="g ...
- C#面向对象20 序列化和反序列化
序列化和反序列化 序列化是把一个内存中的对象的信息转化成一个可以持久化保存的形式,以便于保存或传输,序列化的主要作用是不同平台之间进行通信,常用的有序列化有json.xml.文件等 一.序列化为j ...
- C#求1-100的质数，100-1000的水仙花数，1-100所有的平方和平方平方根
//你们的鼓励是我最大的动力 大家可以多留言评论 在接下来很长一段时间我会从初级到高级每天更新 大家有想学习的内容也可以留言哦 //现在是我做C#老师的第28天,希望和大家一起努力 加油 using ...
- BZOJ3884题解上帝与集合的正确用法--扩展欧拉定理
题目链接 https://www.lydsy.com/JudgeOnline/problem.php?id=3884 分析 扩展欧拉定理裸题 欧拉定理及证明: 如果\((a,m)=1\),则\(a^{ ...
- 解决VS2015 不能设置下面的断点**** 断点未能绑定
解决VS2015 不能设置下面的断点**** 断点未能绑定 1. 清理解决方案 , 重新生成解决方案 , 无效!! 2. 选项-- 调试 -- 启用编辑并继续 无效!! 3. 启 ...