day66

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 },
]
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <table>
        <tr>
            <th>排名</th>
            <th>姓名</th>
            <th>数学</th>
            <th>语文</th>
            <th>英语</th>
            <th>总分</th>
        </tr>
        <tr v-for="(st,i) in scores">
            <td>{{ i+1 }}</td>
            <td v-for="v in st">{{ v }}</td>
        </tr>
    </table>
</div>
</body>
<script src="vue/vue.min.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 total_score = [];
    scores.forEach((st)=>{
        st.total = st.math + st.chinese + st.english;
        total_score.push(st);
    });

    for (let i = 0; i < total_score.length - 1; i++) {
        for (let j = 0; j < total_score.length - 1 - i; j++) {
            if (total_score[j].total > total_score[j + 1].total) {
                temp = total_score[j];
                total_score[j] = total_score[j + 1];
                total_score[j + 1] = temp;

            }
        }
    }

</script>
<script>
    new Vue({
        el: '#app',
        data: {
            scores: total_score
        }
    })
</script>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <table>
        <tr>
            <th>排名</th>
            <th>姓名</th>
            <th>数学</th>
            <th>语文</th>
            <th>英语</th>
            <th>总分</th>
        </tr>
        <tr v-for="(st,i) in scores" v-if="st.math > 60 & st.chinese > 60 & st.english > 60">
            <td>{{ i+1 }}</td>
            <td v-for="v in st">{{ v }}</td>
        </tr>
    </table>
</div>
</body>
<script src="vue/vue.min.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 total_score = [];
    scores.forEach((st) => {
        st.total = st.math + st.chinese + st.english;
        total_score.push(st);
    });

    for (let i = 0; i < total_score.length - 1; i++) {
        for (let j = 0; j < total_score.length - 1 - i; j++) {
            if (total_score[j].total > total_score[j + 1].total) {
                temp = total_score[j];
                total_score[j] = total_score[j + 1];
                total_score[j + 1] = temp;

            }
        }
    }

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

posted @ 2019-12-17 22:00  SetCreed  阅读(79)  评论(0编辑  收藏