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 ...
随机推荐
- 阿里EMR部署
选自定义购买: 选择master配置: 选择core配置: 下一步,选高级里在jdbc后填RDS的url, 用户名,密码: jdbc:mysql://rm-d7o7x76l11u0434zn.mysq ...
- [bzoj4026]dC Loves Number Theory_主席树_质因数分解_欧拉函数
dC Loves Number Theory 题目大意:dC 在秒了BZOJ 上所有的数论题后,感觉萌萌哒,想出了这么一道水题,来拯救日益枯竭的水题资源. 给定一个长度为 n的正整数序列A,有q次询问 ...
- yaml语言格式
YAML是"YAML Ain't a Markup Language"(YAML不是一种标记语言),强调这种语言以数据做为中心,而不是以置标语言为重点. 转载2篇比较好的关于yam ...
- cxLookupComboBox控件的应用
1.Properties-DropDownListStyle:下拉列表的模式, 里面有三个值:lsEditList: lsEditFixedList lsFixedList 2.Head ...
- python病毒
介绍 今天碰到一个有趣的python病毒,在这里https://github.com/cranklin/Python-Virus/blob/master/pythonvirus.py#L37 源码 分 ...
- webpack自定义loader并发布
一.官网对loader的解释: 1.loader 是导出为一个函数的 node 模块.该函数在 loader 转换资源的时候调用.给定的函数将调用 loader API,并通过 this 上下文访问. ...
- json返回数据多个是数组，单个就不是处理方案
/// <summary> /// 计算方案 当前返回的对象 /// </summary> [JsonConverter(ty ...
- （四）创建基于maven的javaFX+springboot项目，用户界面与后台逻辑分离方式
下面来介绍创建maven的javaFX+springboot项目,基于用户界面与后天逻辑分离的方式,用户界面使用fxml文件来常见,类似于jsp,可以引入css文件修饰界面 maven依赖 <d ...
- centos7上的firewalld 的使用
#centos7上的firewalld 的使用 一.firewalld的基本启动关闭命令 启动服务------systemctl start firewalld 关闭服务------systemctl ...
- 什么是IOC和什么是AOP，依赖注入(DI)和Ninject，Ninject
我们所需要的是,在一个类内部,不通过创建对象的实例而能够获得某个实现了公开接口的对象的引用.这种“需要”,就称为DI(依赖注入,Dependency Injection),和所谓的IoC(控制反转,I ...