• day066作业


    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
        <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
        <title>Document</title>
    </head>
    <body>
    <div id='app01' >
        <table class="table table-hover table-striped">
            <thead>
                <tr>
                    <th>排名</th>
                    <th>姓名</th>
                    <th>数学</th>
                    <th>语文</th>
                    <th>英语</th>
                    <th>总分</th>
                </tr>
            </thead>
            <tbody >
                <tr v-for="(pepole, i) in scores">
                    <td>{{i+1}}</td>
                    <td>{{pepole.name}}</td>
                    <td>{{pepole.math}}</td>
                    <td>{{pepole.chinese}}</td>
                    <td>{{pepole.english}}</td>
                    <td>{{pepole.sum}}</td>
                </tr>
            </tbody>
        </table>
    </div>
    <br>
    <br>
    <div id="app02">
        <table class="table table-hover table-striped">
            <thead>
                <tr>
                    <th>排名</th>
                    <th>姓名</th>
                    <th>数学</th>
                    <th>语文</th>
                    <th>英语</th>
                    <th>总分</th>
                </tr>
            </thead>
            <tbody >
                <tr v-for="(pepole, i) in filteredScores">
                    <td>{{i + 1}}</td>
                    <td>{{pepole.name}}</td>
                    <td>{{pepole.math}}</td>
                    <td>{{pepole.chinese}}</td>
                    <td>{{pepole.english}}</td>
                    <td>{{pepole.sum}}</td>
                </tr>
            </tbody>
        </table>
    </div>
    <br>
    <br>
    <div id='app03' >
        <table class="table table-hover table-striped">
            <thead>
                <tr>
                    <th>排名</th>
                    <th>姓名</th>
                    <th>数学</th>
                    <th>语文</th>
                    <th>英语</th>
                    <th>总分</th>
                </tr>
            </thead>
            <tbody >
                <tr v-for="(pepole, i) in scores">
                    <td>{{i+1}}</td>
                    <td>{{pepole.name}}</td>
                    <td>{{pepole.math}}</td>
                    <td>{{pepole.chinese}}</td>
                    <td>{{pepole.english}}</td>
                    <td>{{pepole.sum}}</td>
                </tr>
            </tbody>
        </table>
        <button v-on:click='filter("chinese")'>语文</button>
        <button v-on:click='filter("english")'>英语</button>
        <button v-on:click='filter("math")'>数学</button>
        <button v-on:click='filter("all")'>所有</button>
        <input type="number" name="lower" v-model='lower'> ~ <input v-model='upper' type="number" name="upper">
    </div>
    </body>
    <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 },
        ];
        for (i in scores) {
            scores[i]['sum'] = scores[i].math + scores[i].chinese + scores[i].english;
        };
        // console.log(scores.length)
        for (let i=0; i < scores.length; i++) {
            for (let j=0; j < scores.length - 1 - i; j++) {
                if (scores[j].sum < scores[j + 1].sum) {
                    let temp = scores[j];
                    scores[j] = scores[j + 1];
                    scores[j + 1] = temp;
                };
            };
        };
        new Vue({
            el: '#app01',
            data: {
                    scores: scores,
            },
        });
        // app02
        var filteredScores = [];
        for (i in scores) {
            // 用is_show标记是否有科目小于60分
            is_show = 1;
            s = ['math', 'english', 'chinese'];
            s.forEach(function (val, index){
                if (scores[i][val] < 60) {
                    is_show = 0;
                };
            }); 
            if (is_show) {
                filteredScores.push(scores[i]);
            };
        };
        new Vue({
            el: '#app02',
            data: {
                filteredScores: filteredScores,
            },
        })
        // app03
        app03Scores = JSON.parse(JSON.stringify(scores));
        new Vue({
            el: '#app03',
            data: {
                scores: app03Scores,
                upper: 100,
                lower: 0,
            },
            methods: {
                filter (course) {
                    if (course=='all') {
                        this.scores = app03Scores;
                        return;
                    };
                    var lower = this.lower;
                    var upper = this.upper;
                    var temp = [];
                    scores.forEach(function (val, index){
                        if (val[course] > lower & val[course] < upper) {
                            temp.push(scores[index]);
                        };
                    });
                    this.scores = temp;
                },
            }
        })
    </script>
    </html>
    
  • 相关阅读:
    django显示SQL语句
    AngularJS国际化配置
    Django的国际化
    21天实战caffe笔记_第二天
    图像处理之CSC性能优化(源码)
    图像处理之CSC色彩转换
    21天实战caffe笔记_第一天
    图像处理之色彩转换(CCM)
    图像处理之FPN校正
    图像处理之坏点校正及源码实现
  • 原文地址:https://www.cnblogs.com/YajunRan/p/12057987.html
Copyright © 2020-2023  润新知