作业

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的更多相关文章

随机推荐

可拖拽排序的vue组件
最近在优化一个vue的博客系统,想实现文章列表处的文章拖拽功能.就试了一下awe-dnd vue插件,觉得还挺好用的. 安装 npm install awe-dnd --save 使用在main.j ...
range()函数在python3与python2中的区别
range()函数在python3与python2中的区别 - CSDN博客 https://blog.csdn.net/weixin_37579123/article/details/8098038 ...
POJ-3255-Roadblocks POJ-Dijkstra+邻接表
今天写了这一题,一开始跑了两个Dijkstra,但是造成内存超限,所以现在在学习邻接表,打算明天用邻接表和优先队列写,目前还在学习中,所以题目啥也还没上传,先上传了今晚对于邻接表的理解(见上图),明天 ...
spring boot问题记录（持续更新）
1.springboot v2.1.1.RELEASE版本中server.context-path=/demo不起作用? 路径变了:server.servlet.context-path=/dem ...
MATLAB 中自定义函数的使用
MATLAB在文件内部(在函数内部)定义函数,但文件名以开头函数来命名,与Java中每个文件只能有一个公开类,但在文件内部还是可以定义其他非公开类一个道理. 无参函数 do.m function do ...
bzoj4144 Petrol
题意:给你一张n个点m条边的带权无向图.其中由s个点是加油站.询问从x加油站到y加油站,油箱容量<=b,能否走到? n,m,q,s<=20W,b<=2e9. 标程: #include ...
Ansible-playbook简单应用的几个实例
①ansible-playbook的循环: 重复执行某任务:对迭代项的引用,固定变量名为“item”,而后要在task中使用with_items给定要迭代的元素列表,列表方法:字符串/字典(类似jso ...
HTML - 框架标签相关
<html> <head></head> <!-- frameset 框架标签 cols : 按照列进行区域的切分 rows : 按照行进行区域的切分 fra ...
csp-s模拟测试54x，y，z题解
题面:https://www.cnblogs.com/Juve/articles/11606834.html x: 并差集,把不能分到两个集合里的元素和并到一起,设连通块个数为cnt,则答案为:$2^ ...
简单科普下hosts文件原理与制作
简单科普下hosts文件原理与制作 hosts文件是一个用于储存计算机网络中各节点信息的计算机文件.这个文件负责将主机名映射到相应的IP地址.hosts文件通常用于补充或取代网络中DNS的功能.和DN ...

day66test

作业

day66test的更多相关文章

随机推荐

热门专题