day66 作业

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <style>
        .active {
            background-color: aqua;
        }
    </style>
</head>
<body>
<div id="app">
    <table class="table-striped table table-hover table-bordered">
        <thead>
        <tr>
            <th>排名</th>
            <th>姓名</th>
            <th>math</th>
            <th>chinese</th>
            <th>english</th>
            <th>总分</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(e,i) in result">
            <th>{{ i+1 }}</th>
            <th v-for="(v,k,j) in e">{{ v }}</th>
        </tr>
        </tbody>
    </table>
    <hr>



    <table class="table-striped table table-hover table-bordered">
        <thead>
        <tr>
            <th>排名</th>
            <th>姓名</th>
            <th>math</th>
            <th>chinese</th>
            <th>english</th>
            <th>总分</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(e,i) in result" v-if="e.math>=60 && e.chinese>=60 && e.english>=60">
            <th>{{ i+1 }}</th>
            <th v-for="(v,k,j) in e">{{ v }}</th>
        </tr>
        </tbody>
    </table>
    <hr>



    <table class="table-striped table table-hover table-bordered">
        <thead>
        <tr>
            <th>排名</th>
            <th>姓名</th>
            <th>math</th>
            <th>chinese</th>
            <th>english</th>
            <th>总分</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(e,i) in result" v-if="(e.math<=v2 && e.math>=v1 && page ==='math')|| (e.chinese<=v2 && e.chinese>=v1 && page ==='chinese')||(e.english<=v2 && e.english>=v1 && page ==='english')">
            <th>{{ i+1 }}</th>
            <th v-for="(v,k,j) in e">{{ v }}</th>
        </tr>
        </tbody>
    </table>


    <button @click="f('math')" :class="{active : page==='math'}">math</button>
    <button @click="f('chinese')" :class="{active : page==='chinese'}">chinese</button>
    <button @click="f('english')" :class="{active : page==='english'}">english</button>
    <input type="number" v-model="v1">~~~<input type="number" v-model="v2">

</div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            v1:'',
            v2:'',
            page: 'r_page',
            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},
            ]
        },
        methods: {
            f(argv) {
                this.page=argv;
            }
        },
        computed: {
            result() {
                if (this.page === 'r_page') {
                    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 tmp = this.scores[j];
                                this.scores[j] = this.scores[j + 1];
                                this.scores[j + 1] = tmp
                            }
                        }
                    }
                    for (let i = 0; i < this.scores.length; i++) {
                        this.scores[i]['总分'] = this.scores[i].math + this.scores[i].chinese + this.scores[i].english
                    }
                }else{
                    let m=this.page;
                    console.log(m);
                    if (m=='math'){
                        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 + 1].math ) {
                                    console.log(this.scores[j].m);
                                    let tmp = this.scores[j];
                                    this.scores[j] = this.scores[j + 1];
                                    this.scores[j + 1] = tmp
                                }
                            }
                        }
                    }else if(m=='chinese'){
                        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].chinese  < this.scores[j + 1].chinese ) {
                                    console.log(this.scores[j].m);
                                    let tmp = this.scores[j];
                                    this.scores[j] = this.scores[j + 1];
                                    this.scores[j + 1] = tmp
                                }
                            }
                        }
                    }else if(m=='english'){
                        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].english  < this.scores[j + 1].english ) {
                                    console.log(this.scores[j].m);
                                    let tmp = this.scores[j];
                                    this.scores[j] = this.scores[j + 1];
                                    this.scores[j + 1] = tmp
                                }
                            }
                        }
                    }
                    for (let i = 0; i < this.scores.length; i++) {
                        this.scores[i]['总分'] = this.scores[i].math + this.scores[i].chinese + this.scores[i].english
                    }
                }
                return this.scores
            }
        }
    })

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