Vue --- exercise instructions

Scores = [
{name: 'Bob', Math: 97, chinese: 89, Dictionary Dictionary English: 67},
{name: 'Tom', Math: 67, chinese: 52 is, Dictionary Dictionary English: 98},
{name: 'Jerry', Math: 72, chinese: 87, Dictionary Dictionary English: 89},
{name: 'Ben', Math: 92, chinese: 87, Dictionary Dictionary English: 59},
{name: 'Chan', Math: 47, chinese: 85, Dictionary Dictionary English: 92}]
rendering using table tags above data table, the first column of the table ranking score students, and finally out of a student;

<!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>

Vue --- exercise instructions

Guess you like