vue作业2
"""
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表格标签渲染以上数据，表格第一列是学生总分排名，最后一列是学生总分；
""""
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>1</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="vue.js"></script>
<script>
`
let scores = null;
$.ajax({
url:'',
success(response) {
scores = response.data
}
});
`;
// 模拟当前页面加载成功，从后台获取操作的数据
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;
}
// console.log(scores);
// 按照总分排序
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>
"""
3、还是采用上方相同的数据，采用相同的渲染规则，只渲染所有科目都及格了的学生。
"""
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>3</title>
<style>
.active {
background-color: pink;
}
</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 width="400" 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="vue.js"></script>
<script>
`
let scores = null;
$.ajax({
url:'',
success(response) {
scores = response.data
}
});
`;
// 模拟当前页面加载成功，从后台获取操作的数据
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;
}
// console.log(scores);
// 按照总分排序
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作业2的更多相关文章
- vue作业1
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Vue习题作业练习
作业一: 用table表格标签渲染以上数据,表格第一列是学生总分排名,最后一列是学生总分 <!DOCTYPE html> <html lang="en"> ...
- 第十一篇:vue.js监听属性(大作业进行时)
这个知识点急着用所以就跳过<计算属性>先学了 首先理解一下什么是监听:对事件进行监控,也就是当我进行操作(按了按钮之类的事件)时,会有相应的事情发生 上代码 <div id = &q ...
- 第十篇:vue.js for循环语句(大作业进行时)
Vue.js 循环语句 <div id="app"> <ol> <li v-for="site in sites"> /*f ...
- 谈谈我对前端组件化中“组件”的理解，顺带写个Vue与React的demo
前言 前端已经过了单兵作战的时代了,现在一个稍微复杂一点的项目都需要几个人协同开发,一个战略级别的APP的话分工会更细,比如携程: 携程app = 机票频道 + 酒店频道 + 旅游频道 + ..... ...
- Vue#表单控件绑定
使用v-model 在表单控件上实现数据双向绑定. 单选:https://jsfiddle.net/miloer/bs49p0fx/ <input type="checkbox&quo ...
- 项目公共js(vue.js)
var urlHead = "http://hm.runorout.com/";// var urlHead = "/";/*加入跑班相关*/var urlGe ...
- Vue.JS入门学习随笔
PS:先说说学习Vue的缘由吧,学习完了React之后,突然发现又出了一款叫做vue的框架,而且据说可以引领又一波新框架的潮流,我容易吗我!!! Vue.js(读音 /vjuː/, 类似于view ...
- vue视频学习笔记01
video 1 vue:读音: v-u-eview vue到底是什么?一个mvvm框架(库).和angular类似比较容易上手.小巧mvc:mvpmvvmmv*mvx官网:http://cn.vuej ...
随机推荐
- python中sys.argv使用
创建一个脚本,内容如下 [root@bogon ~]# cat a.py #conding:utf-8import sysprint(sys.argv[0]) # 打印sys.argv的第0个参数 执 ...
- canvas基础知识
canvas基础知识 ## CanvasDOM对象 #### 获取绘图环境```canvas.getContext();``` #### 设置宽和高```canvas.width = 500;canv ...
- 配置java开发环境，存在多个版本JDK时，怎样让所需版本生效
我本地有个1.7.0的java版本,后来我新装了一个13的版本,但是命令行查java版本的时候,生效的还是1.7.0的版本,经过资料查询以及自身亲测,现将过程记录如下: 1.电脑右键选择--属性--高 ...
- python+selenium下载文件——Chrome
from selenium import webdriver import time options = webdriver.ChromeOptions() prefs = { 'profile.de ...
- java 编码设计细节
1.hibernate注解 @Validated({ APIGetsGroup.class })@NotBlank(message = "{cameraReceive.captureId.e ...
- 【Android Apk重新签名报错re-sign.jar之解决方法】
故障现象:
- 四、Kubernetes_V1.10集群部署-master-创建kubeconfig
1.生成配置文件 # 创建 TLS Bootstrapping Token # export BOOTSTRAP_TOKEN=$( /dev/urandom | od -An -t x | tr -d ...
- sqlserver迁移mysql语法修改
1.top 100 选取表中前100条改为 limit #{limit},limit 为变量2.获取当前日期getdate()改为now()3.id=#{id,jdbcType=BIGINT}改为i ...
- nginx配置本地域名反向代理实现本地多域名80访问
什么是反向代理? 代理:通过客户机的配置,实现让一台服务器代理客户机,客户的所有请求都交给代理服务器处理. 反向代理:用一台服务器,代理真实服务器,用户访问时,不再是访问真实服务器,而是代理服务器. ...
- linux源码下载
概要:本文主要介绍ubuntu环境下,内核源码和命令源码的获取方式. 内核源码: 1.最简洁的方式,使用命令:apt-get source linux-$(uname -r).但配置的源服务器中不一定 ...