正文
vue渲染学生信息
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
渲染学生信息
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title></head>
<body>
<div id="hmwk">
<table>
<tr v-for="(score,j) in scores" v-if="j == 0">
<th>rank</th>
<th v-for="(v,k,i) in score" >{{ k }}</th>
<th>total</th>
</tr>
<tr v-for="(obj,i) in scores">
<td>{{ }}</td>
<td v-for="(v,k,j) in obj" v-if="obj.math>60&&obj.chinese>60&&obj.english>60">{{ v }}</td>
<td v-if="obj.math>60&&obj.chinese>60&&obj.english>60">{{ sum(obj.math,obj.chinese,obj.english,obj.name) }}</td>
</tr>
</table>
<!--obj.math+obj.chinese+obj.english -->
<script src="js/vue.js"></script>
<script>
// let arr = [0,400];
let arr1 = [];
let dic1 = {};
new Vue ({
el:"#hmwk",
data:{
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},
],
dic:dic1, },
methods:{
sum(a,b,c,d){
let count = 0 ;
count = a+b+c;
// for (let k=0; k<arr.length-1; k++){
// if (arr[k]<count<arr[k+1]){
// arr.splice(k+1,0,count)
// }
// }
arr1.push(count);
arr1.sort(); for (let k=0; k<arr1.length; k++) {
dic1[arr1[k]]= k+1
}
console.log(dic1);
console.log(arr1);
return count
},
}
})
</script>
</div>
</body>
</html>
