12.17仕事

1、転写産物について前データ
スコア= [
{名： 'ボブ'、数学：97、中国語：89、辞書英語：67}、
{名：「トム、数学：67、中国語：52である、辞書英語：98} 、
{名： 'ジェリー'、数学：72、中国語：87、辞書英語：89}、
{名： 'ベン'、数学：92、中国語：87、辞書英語：59}、
{名： 'チャン'、数学： 85、英語：中国の47、 92}、]
データテーブルの上、表の最初の列は、スコア学生をランク付けし、最終的には学生のうち、テーブルタグをレンダリングします。

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div id="app">
        <table border="1" >
         <tr>
             <th>id</th>
             <th>name</th>
             <th>math</th>
             <th>chinese</th>
             <th>english</th>
             <th>total</th>
         </tr>
         <tr v-for="(score,i) in result">
             <td>{{ i + 1 }}</td>
            <td v-for="v in score">{{ v }}</td>
        </tr>
     </table>



    </div>
</body>
<script src="js/vue.js"></script>
<script>



    new Vue({
        el: '#app',
        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 },
]

        },
        computed: {
            result() {
                // 按照总分数进行排名
                for (let i = 0; i < this.scores.length - 1; i++) {
                    for (let j = 0; j < this.scores.length - 1 - i; j++) {
                        // 处理条件即可

                        if (this.scores[j].math + this.scores[j].chinese + this.scores[j].english < this.scores[j + 1].math + this.scores[j + 1].chinese + this.scores[j + 1].english) {
                            let temp = this.scores[j];
                            this.scores[j] = this.scores[j + 1];
                            this.scores[j + 1] = temp;
                        }
                    }

                }
                for (let i = 0; i < this.scores.length ; i++) {
                    this.scores[i]['total']=this.scores[i].math + this.scores[i].chinese + this.scores[i].english}


                return this.scores;
                console.log(this.scores);

            },
        }


    });

</script>
</html>

おすすめ