vue练习
目录
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="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--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表格标签渲染以上数据，表格第一列是学生总分排名，最后一列是学生总分；-->
<div id="add">
<table>
<thead>
<tr>
<th>总分排名</th>
<th>名字</th>
<th>数学</th>
<th>语文</th>
<th>英语</th>
<th>学生总分</th>
</tr>
</thead>
<tbody>
<tr v-for="(v,i) in scoresTwo" v-if="v.math>60&v.chinese>60&v.english>60">
<td>{{ i+1 }}</td>
<td v-for="j in v">{{ j }}</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 real=[];
for (i of scores){
i.all =i.math + i.chinese + i.english;
real.push(i)
}
// console.log(scores);
for (let i=0;i<real.length-1;i++){
for (let j=0;j<real.length-1-i;i++){
if (real[j].all<real[j+1].all){
let tmp=real[j];
real[j]=real[j+1];
real[j+1]=tmp
}
}
}
new Vue({
el:'#add',
data:{
scoresTwo:real
},
})
</script>
</html>
