Vue小练习 02

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>监听属性</title>
</head>
<body>

<div id="d1">

    <table>
        <thead>
        <tr>
            <th>No.</th>
            <th>Name</th>
            <th>Math</th>
            <th>Chinese</th>
            <th>English</th>
            <th>SumScore</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="d in orderByScore">
            <td></td>
            <td>{{ d.name }}</td>
            <td>{{ d.math }}</td>
            <td>{{ d.chinese }}</td>
            <td>{{ d.english }}</td>
            <td>{{ d.ttlScore }}</td>
        </tr>
        </tbody>
    </table>


</div>

<script src="vue/vue.js"></script>
<script>
        new Vue({
            el: '#d1',
            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},
                ],

            },
            filters: {
                sumScore(s1, s2, s3) {
                    return s1 + s2 + s3
                }
            },
            computed: {
                orderByScore() {
                    let scoreArr = this.scores;
                    for (let i = 0; i < scoreArr.length - 1; i++) {
                        for (let j = 0; j < scoreArr - 1 - i; j++) {

                            let currentScore = scoreArr[j].math + scoreArr[j].chinese + scoreArr[j].english;
                            let nextScore = scoreArr[j + 1].math + scoreArr[j + 1].chinese + scoreArr[j + 1].english;
                            scoreArr[j].ttlScore = currentScore;
                            scoreArr[j + 1].ttlScore = nextScore;

                            if (currentScore < nextScore) {
                                let temp = scoreArr[j];
                                scoreArr[j] = scoreArr[j + 1];
                                scoreArr[j + 1] = temp;
                            }
                        }
                    }
                    console.log(scoreArr);
                    return scoreArr
                }
            }
        });

</script>
</body>
</html>
猜你喜欢
