这是什么b

用table表格标签渲染总排名和总分数据

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title></title>

</head>
<body>
    <div id="app">
        <table border="1">
<tbody>

</tbody>
</table>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {

        }
    })
</script>
    <script>




//    stus = [
//        {
//            name: 'Bob',
//            grade: 98
//        },
//        {
//            name: 'Tom',
//            grade: 87
//        },
//        {
//            name: 'Jerry',
//            grade: 92
//        },
//    ];
//
var tbody=document.getElementsByTagName('tbody')
  var  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 },
];
var Total=[];
    // 按照分数进行排名
Total[0] =+scores[0].math+ +scores[0].chinese+ +scores[0].english;
Total[1] =+scores[1].math+ +scores[1].chinese+ +scores[1].english;
Total[2] =+scores[2].math+ +scores[2].chinese+ +scores[2].english;
Total[3] =+scores[3].math+ +scores[3].chinese+ +scores[3].english;
Total[4] =+scores[4].math+ +scores[4].chinese+ +scores[4].english;




    for (let i=0; i<scores.length; i++) {
        var newTr = document.createElement('tr');
        for (let j=0; j<scores.length-i; j++) {
            // 处理条件即可


            if (Total[j] < Total[j+1]) {
                let temp = Total[j];
                Total[j] = Total[j + 1];
                Total[j + 1] = temp;
            }
            x=5-j;
            newTr.innerHTML='<td>'+ x +'</td><td>'+Total[j]+'</td>';
            tbody[0].appendChild(newTr);
        }
    }

    console.log(scores);



</script>
</html>

还是用上方的规则,但是只渲染所有科目及格的学生


<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div id="app">
        <table border="1">

            <tr v-for="(stu,i) in scores" v-if="stu.math>=60 && stu.chinese>=60 && stu.english>=60">
                <td>{{ i + 1 }}</td>
                <td v-for="v in stu">{{ 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},
    ];

var Total=[];
    for (stu of scores) {
        stu.total = stu.math + stu.chinese + stu.english;
        Total.push(stu);
    }


    for (let i=0; i<scores.length; i++) {
        // var newTr = document.createElement('tr');
        for (let j=0; j<scores.length-i; j++) {

            if (Total[j] < Total[j+1]) {
                let temp = Total[j];
                Total[j] = Total[j + 1];
                Total[j + 1] = temp;
            }
            }

    }

    new Vue({
        el: '#app',
        data: {
            scores: Total,
        }
    });
</script>
</html>

猜你喜欢