作业

1. 先有一下成绩单数据
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 },
]
用table表格标签渲染以上数据，表格第一列是学生总分排名，最后一列是学生总分；
思路：逻辑都在js模块中，用scores变量保存，然后对这个socres进行遍历，把stu对象中的各个数据进行相加，然后用一个数组把加完的数据存起来，用于在表格中展示。
在模板中通过循环将stu对象展示出来，先展示索引，再展示对应的值
先通过冒泡排序，把total排序好，然后再展示

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div id="app">
    <table border="1" width="400" rules="margin:auto">
        <tr>
            <th>排名</th>
            <th>姓名</th>
            <th>数学</th>
            <th>语文</th>
            <th>英语</th>
            <th>总分</th>
        </tr>
        <tr v-for="(stu,i) in scores">
            <td>{{ i+1}}</td>
            <td v-for="v in stu">{{ v}}</td>
        </tr>
    </table>
</div>
</body>
<script src="js/vue.js"></script>
<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},
    ];
    let total_scores = [];
    for (stu of scores){
        stu.total = stu.math + stu.chinese + stu.english;
        total_scores.push(stu);
    }
    for (let i=0;i<total_scores.length-1;i++){
        for (let j=0;j<total_scores.length-1-i;j++){
            if (total_scores[j].total<total_scores[j+1].total){
             let t=total_scores[j];
            total_scores[j] = total_scores[j+1];
            total_scores[j+1]=t;
            }
        }
    }
    console.log(total_scores);
    new Vue({
        el:'#app',
        data:{
            scores:total_scores,
        }
    });
    </script>
</html>

2.用上面的数据，采用相同的渲染规则，只渲染所有科目都及格了的学生。
思路就是在for循环中加入一个if判断，将及格的数据都筛选出来展示

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div id="app">
    <table border="1" width="400" rules="margin:auto">
        <tr>
            <th>排名</th>
            <th>姓名</th>
            <th>数学</th>
            <th>语文</th>
            <th>英语</th>
            <th>总分</th>
        </tr>
        <!--添加筛选条件-->
        <tr v-for="(stu,i) in scores" v-if="stu.math>60&&stu.chinese>60&&stu.english>60">
            <td>{{ i+1}}</td>
            <td v-for="v in stu">{{ v}}</td>
        </tr>
    </table>
</div>
</body>
<script src="js/vue.js"></script>
<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},
    ];
    let total_scores = [];
    for (stu of scores){
        stu.total = stu.math + stu.chinese + stu.english;
        total_scores.push(stu);
    }
    for (let i=0;i<total_scores.length-1;i++){
        for (let j=0;j<total_scores.length-1-i;j++){
            if (total_scores[j].total<total_scores[j+1].total){
             let t=total_scores[j];
            total_scores[j] = total_scores[j+1];
            total_scores[j+1]=t;
            }
        }
    }
    console.log(total_scores);
    new Vue({
        el:'#app',
        data:{
            scores:total_scores,
        }
    });
    </script>
</html>

3.还是采用上方相同的数据，添加筛选规则：
    i）有三个按钮：语文、数学、外语，点击谁谁高亮，且当前筛选规则采用哪门学科
    ii）两个输入框，【】~【】，前面天最小分数，后面填最大分数，全部设置完毕后，表格的数据会被更新只渲染满足所有条件的结果
    举例：点击语文，输入【86】~【87】，那就只会渲染Jerry和Ben两条数据
思路：
1、点击高亮
首先应该给一个类，这个类设置一个高亮样式，然后把类绑定给按钮，但是要给一个k-v形式的类，v用于控制这个类是否为true（是否起作用），再一个是把按钮绑定一个点击事件（包着一个含有参数的方法，这个方法就是用于判断前面的类的样式是否显示），所以一个逻辑过程，就是鼠标点击按钮，会把参数传到vue中，再把当前的rule进行设置，于是就可以将类（对应的css样式）展示出来
2、输入框，筛选数据
输入框绑定的v-model，控制input中的value，然后输出的数据是在第一种的基础上面，加了v-if（逻辑实现输入框没有数据或只有一个有数据就会展示全部学生数据，在区间内，存在的数据），会把满足筛选条件的数据展示出来。

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .action {
            background-color: pink;
        }
    </style>
</head>
<body>
    <div id="app">
        <p style="margin: 10px auto; width: 400px">
            <button :class="{action: rule === 'chinese'}" @click="clickAction('chinese')">语文</button>
            <button :class="{action: rule === 'math'}" @click="clickAction('math')">数学</button>
            <button :class="{action: rule === 'english'}" @click="clickAction('english')">英语</button>
            <input type="number" min="1" max="100" v-model="min">
            ~
            <input type="number" min="1" max="100" v-model="max">
        </p>
        <table border="1" width="400" rules="all" style="margin: auto">
            <tr>
                <th>排名</th>
                <th>姓名</th>
                <th>数学</th>
                <th>语文</th>
                <th>英语</th>
                <th>总分</th>
            </tr>
            <tbody v-if="rule === 'math'">
                <tr v-for="(stu,i) in scores" v-if="(min && max && stu.math >= +min && stu.math <= +max) || (!min || !max)">  #
                    <td>{{ i + 1 }}</td>
                    <td v-for="v in stu">{{ v }}</td>
                </tr>
            </tbody>
            <!--第一步是筛选是否有高亮按钮-->
            <tbody v-else-if="rule === 'chinese'">
            <!--第一个and筛选框是否空，第二个筛选是否有在输入框间的数据，第三个||筛选是否一个有数据，一个没有数据-->
                <tr v-for="(stu,i) in scores" v-if="(min && max && stu.chinese >= +min && stu.chinese <= +max) || (!min || !max)">
                    <td>{{ i + 1 }}</td>
                    <td v-for="v in stu">{{ v }}</td>
                </tr>
            </tbody>
            <tbody v-else-if="rule === 'english'">
                <tr v-for="(stu,i) in scores" v-if="(min && max && stu.english >= +min && stu.english <= +max) || (!min || !max)">
                    <td>{{ i + 1 }}</td>
                    <td v-for="v in stu">{{ v }}</td>
                </tr>
            </tbody>
            <tbody v-else>
                <tr v-for="(stu,i) in scores">
                    <td>{{ i + 1 }}</td>
                    <td v-for="v in stu">{{ v }}</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
<script src="js/vue.js"></script>
<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},
    ];
    let total_scores = [];
    for (stu of scores) {
        stu.total = stu.math + stu.chinese + stu.english;
        total_scores.push(stu);
    }
    for(let i = 0; i < total_scores.length - 1; i++) {
        for(let j = 0;  j < total_scores.length - 1 - i; j++) {
            if (total_scores[j].total < total_scores[j+1].total) {
                let t = total_scores[j];
                total_scores[j] = total_scores[j+1];
                total_scores[j+1] = t;
            }
        }
    }
    console.log(total_scores);
    new Vue({
        el: '#app',
        data: {
            scores: total_scores,
            rule: '',
            min: '',
            max: '',
        },
        methods: {
            clickAction(rule) {
                this.rule = rule;
            }
        }
    });
</script>
</html>

day66test的更多相关文章

随机推荐

day23_3_configparse
#!/usr/bin/env python# -*- coding:utf-8 -*-# ------------------------------------------------------- ...
标记excel中输入的重复数据
首先选中需要标记重复的数据列开始 -> 条件格式 -> 突出显示单元格规则 -> 重复值选择相应的颜色即可效果如下:
Spring Cloud Config的配置中心使用非对称性加密
首先,我们需要通过keytool工具来生成密钥对. keytool是JDK中的一个密钥和证书管理工具.它使用户能够管理自己的公钥/私钥对及相关证书,用于(通过数字签名)自我认证(用户向别的用户/服务认 ...
docker企业级镜像仓库harbor
第一步:安装docker和docker-compose 第二步:下载harbor-offine-installer-v1.5.1.tgz 第三步:上传到/opt,并解压第四步:修改harbor.cf ...
16.ajax_case08
# 抓取简书博客总阅读量 # https://www.jianshu.com/u/130f76596b02 import requests import json import re from lxm ...
运算符的基本概念以及常用Scanner、随机数Random、选择结构的初步了解
运算符分类算术运算符位运算符关系运算符|比较运算符逻辑运算符条件运算符赋值运算符其中优先级顺序从上到下,可以记忆口诀:单目乘除位关系,逻辑三目后赋值操作数: 运算符左右两边的数表达 ...
DNA repair HDU - 2457 AC自动机+DP
题意: 给你N个模板串,并且给你一个文本串, 现在问你这个文本串最少需要改变几个字符才能使得它不包含任何模板串. (以上字符只由A,T,G,C构成) 题解: 刚开始做这一题的时候表示很懵逼,好像没有学 ...
java_初始网络编程
/** * 网咯编程入门: * c/s结构:全称Client/Server结构,是指客户端和服务器结构.常见程序有qq.迅雷等如那件 * B/S结构:全称Browser/Server结构,是指浏览 ...
Python全栈开发：socket代码实例
客户端与服务端交互的基本流程服务端server #!/usr/bin/env python # -*- coding;utf-8 -*- import socket sk = socket.sock ...
Sky Code
Sky Code 给出n个数,求选出4个数组合,使其gcd为1,,\(n<=10000\),每个数\(<=10000\). 解理解1:容斥原理注意到Mobius反演式子不好写出,于是我 ...

day66test

作业

day66test的更多相关文章

随机推荐

热门专题