day 66 作业

1、

<div id="app">
    <table border="1">
        <tr>
            <th>排名</th>
            <th>姓名</th>
            <th>总分</th>
        </tr>
        <tr v-for="(obj,i) in scores" v-if="num" >
            <div >
                <td>{{ i+1 }}</td>
                <td>{{ obj.name }}</td>
                <td>{{ count1(obj) }}</td>
            </div>
        </tr>
    </table>
</div>

<script>
    let app = new Vue({
        el: '#app',
        data: {
            h: '200px',
            w: '200px',
            bgc: 'linear-gradient(to top, red 50%, green 50%)',
            rad: '50%',
            num: false,
            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: {
            count1(obj) {
                return obj.math + obj.chinese + obj.english
            },
            sort1(arr) {
                console.log("调用了");
                for (let i=0; i < arr.length - 1; i++) {
                    for (let j=0; j < arr.length - 1 - i; j++) {
                        if (this.count1(arr[j]) < this.count1(arr[j + 1])) {
                            let temp = arr[j];
                            arr[j] = arr[j + 1];
                            arr[j + 1] = temp;
                        }
                    }
                }
                app.num = true
            }
        },
        filters: {},
        watch: {

        }
    });
    app.sort1(app.scores);
</script>

2、

<div id="app">
    <table border="1">
        <tr>
            <th>排名</th>
            <th>姓名</th>
            <th>总分</th>
        </tr>
        <tr v-for="(obj,i) in scores" v-if="num" >
                <td>{{ i+1 }}</td>
                <td>{{ obj.name }}</td>
                <td>{{ count1(obj) }}</td>
        </tr>
    </table>
</div>

<script>
    let app = new Vue({
        el: '#app',
        data: {
            num: false,
            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: {
            count1(obj) {
                return obj.math + obj.chinese + obj.english
            },
            sort1(abb) {
                let arr = [];
                for (let q=0;q<abb.length; q++){
                    console.log('调用了');
                    if (abb[q].math>60 && abb[q].chinese>60 && abb[q].english>60){
                        arr.splice(q,1,abb[q])
                    }
                }
                for (let i=0; i < arr.length - 1; i++) {
                    for (let j=0; j < arr.length - 1 - i; j++) {
                        if (this.count1(arr[j]) < this.count1(arr[j + 1])) {
                            let temp = arr[j];
                            arr[j] = arr[j + 1];
                            arr[j + 1] = temp;
                        }
                    }
                }
                this.scores = arr;
                app.num = true
            }
        },
        filters: {},
        watch: {

        }
    });
    app.sort1(app.scores);
</script>

3、

<div id="app">
    <table border="1">
        <tr>
            <th>排名</th>
            <th>姓名</th>
            <th>数学</th>
            <th>语文</th>
            <th>英语</th>
            <th>总分</th>
        </tr>
        <tr v-for="(obj,i) in FScores" v-if="num" >
                <td>{{ i+1 }}</td>
                <td>{{ obj.name }}</td>
                <td>{{ obj.math }}</td>
                <td>{{ obj.chinese }}</td>
                <td>{{ obj.english }}</td>
                <td>{{ count1(obj) }}</td>
        </tr>
    </table>
    <div>
        <form action="">
            最小值<input type="number" min="0" max="100" v-model="min">
            ~
            最大值 <input type="number" min="0" max="100" v-model="max">
            <input type="button" value="数学" @click="fClick('math')">
            <input type="button" value="语文" @click="fClick('chinese')">
            <input type="button" value="英语" @click="fClick('english')">
            <input type="button" value="及格" @click="f60">
            <input type="button" value="全部" @click="full">
        </form>

    </div>
</div>

<script>

    let cl = function(obj){
        return JSON.parse(JSON.stringify(obj))
    };

    let app = new Vue({
        el: '#app',
        data: {
            num: false,
            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},
            ],
            FScores:null,
            min:null,
            max:null
        },
        methods: {
            count1(obj) {
                return obj.math + obj.chinese + obj.english
            },
            f60(){
                let aff=[];
                let abb = cl(this.scores);
                for (let q=0;q<abb.length; q++){
                    if (abb[q].math>60 && abb[q].chinese>60 && abb[q].english>60){
                        aff.splice(q,1,abb[q])
                    }
                }
                this.FScores = aff
            },
            sort1() {
                let arr = cl(this.scores);
                for (let i=0; i < arr.length - 1; i++) {
                    for (let j=0; j < arr.length - 1 - i; j++) {
                        if (this.count1(arr[j]) < this.count1(arr[j + 1])) {
                            let temp = arr[j];
                            arr[j] = arr[j + 1];
                            arr[j + 1] = temp;
                        }
                    }
                }
                this.scores = cl(arr);
                this.FScores = cl(this.scores);
                app.num = true
            },
            fClick(f){
                if (this.max==null || this.min==null){
                    return alert('请输入条件')
                }
                let avv = [];
                let acc = cl(this.scores);
                for (let i=0;i<this.scores.length;i++){
                    if (acc[i][f]<=this.max && acc[i][f]>=this.min){
                        avv.splice(i,1,acc[i])
                    }
                }
                this.FScores = cl(avv);
            },
            full(){
                this.FScores = cl(this.scores)
            }
        },
        filters: {},
        watch: {

        }
    });
    app.sort1();

</script>