"""

2、现有以下成绩单数据

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表格标签渲染以上数据，表格第一列是学生总分排名，最后一列是学生总分；

""""

<!DOCTYPE html>

<html lang="zh">

<head>

    <meta charset="UTF-8">

    <title>1</title>

</head>

<body>

    <div id="app">

        <table border="1" style="margin: auto" rules="all">

            <tr>

                <th>排名</th>

                <th>姓名</th>

                <th>数学</th>

                <th>语文</th>

                <th>英语</th>

                <th>总分</th>

            </tr>

            <!--有几个人，就循环渲染几行-->

            <tr v-for="(score, i) in scores">

                <td>{{ i + 1 }}</td>

                <td v-for="v in score">{{v}}</td>

            </tr>

        </table>

    </div>

</body>

<script src="vue.js"></script>

<script>

    `

    let scores = null;

    $.ajax({

        url:'',

        success(response) {

            scores = response.data

        }

    });

    `;

    // 模拟当前页面加载成功，从后台获取操作的数据

    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 in遍历的是取值关键 | for of遍历的是值

    // 添加总分

    for (score of scores) {

        score.total = score.math + score.chinese + score.english;

    }

    // console.log(scores);

    // 按照总分排序

    for (let i=0; i<scores.length-1; i++) {

        for (let j=0; j<scores.length-1-i; j++) {

            if (scores[j].total < scores[j+1].total) {

                let temp = scores[j];

                scores[j] = scores[j+1];

                scores[j+1] = temp;

            }

        }

    }

    console.log(scores);

    new Vue({

        el: '#app',

        data: {

            // 属性名与值为变量的变量名相同，可以简写省略值

            scores,

        }

    })

</script>

</html>

"""

3、还是采用上方相同的数据，采用相同的渲染规则，只渲染所有科目都及格了的学生。

"""

<!DOCTYPE html>

<html lang="zh">

<head>

    <meta charset="UTF-8">

    <title>3</title>

    <style>

        .active {

            background-color: pink;

        }

    </style>

</head>

<body>

    <div id="app">

        <div style="width: 400px; margin: 20px auto">

            <button @click="subject = 'math'" :class="{active: subject === 'math'}">数学</button>

            <button @click="subject = 'chinese'" :class="{active: subject === 'chinese'}">语文</button>

            <button @click="subject = 'english'" :class="{active: subject === 'english'}">英语</button>

            <input type="number" min="0" max="100" v-model="min">

            ~

            <input type="number" min="0" max="100" v-model="max">

        </div>

        <table width="400" border="1" style="margin: auto" rules="all">

            <tr>

                <th>排名</th>

                <th>姓名</th>

                <th>数学</th>

                <th>语文</th>

                <th>英语</th>

                <th>总分</th>

            </tr>

            <tbody v-if="subject === 'math'">

                <tr v-for="(score, i) in scores" v-if="score.math>=min && score.math<=max || (!min || !max)">

                    <td>{{ i + 1 }}</td>

                    <td v-for="v in score">{{v}}</td>

                </tr>

            </tbody>

            <tbody v-else-if="subject === 'chinese'">

                <tr v-for="(score, i) in scores" v-if="score.chinese>=min && score.chinese<=max || (!min || !max)">

                    <td>{{ i + 1 }}</td>

                    <td v-for="v in score">{{v}}</td>

                </tr>

            </tbody>

            <tbody v-else-if="subject === 'english'">

                <tr v-for="(score, i) in scores" v-if="score.english>=min && score.english<=max || (!min || !max)">

                    <td>{{ i + 1 }}</td>

                    <td v-for="v in score">{{v}}</td>

                </tr>

            </tbody>

            <tbody v-else>

                <tr v-for="(score, i) in scores">

                    <td>{{ i + 1 }}</td>

                    <td v-for="v in score">{{v}}</td>

                </tr>

            </tbody>

        </table>

    </div>

</body>

<script src="vue.js"></script>

<script>

    `

    let scores = null;

    $.ajax({

        url:'',

        success(response) {

            scores = response.data

        }

    });

    `;

    // 模拟当前页面加载成功，从后台获取操作的数据

    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 in遍历的是取值关键 | for of遍历的是值

    // 添加总分

    for (score of scores) {

        score.total = score.math + score.chinese + score.english;

    }

    // console.log(scores);

    // 按照总分排序

    for (let i=0; i<scores.length-1; i++) {

        for (let j=0; j<scores.length-1-i; j++) {

            if (scores[j].total < scores[j+1].total) {

                let temp = scores[j];

                scores[j] = scores[j+1];

                scores[j+1] = temp;

            }

        }

    }

    console.log(scores);

    new Vue({

        el: '#app',

        data: {

            // 属性名与值为变量的变量名相同，可以简写省略值

            scores,

            min: '',

            max: '',

            subject: '',

        }

    })

</script>

</html>

vue作业2的更多相关文章

  1. vue作业1

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. Vue习题作业练习

    作业一: 用table表格标签渲染以上数据,表格第一列是学生总分排名,最后一列是学生总分 <!DOCTYPE html> <html lang="en"> ...

  3. 第十一篇:vue.js监听属性(大作业进行时)

    这个知识点急着用所以就跳过<计算属性>先学了 首先理解一下什么是监听:对事件进行监控,也就是当我进行操作(按了按钮之类的事件)时,会有相应的事情发生 上代码 <div id = &q ...

  4. 第十篇:vue.js for循环语句(大作业进行时)

    Vue.js 循环语句 <div id="app"> <ol> <li v-for="site in sites"> /*f ...

  5. 谈谈我对前端组件化中“组件”的理解，顺带写个Vue与React的demo

    前言 前端已经过了单兵作战的时代了,现在一个稍微复杂一点的项目都需要几个人协同开发,一个战略级别的APP的话分工会更细,比如携程: 携程app = 机票频道 + 酒店频道 + 旅游频道 + ..... ...

  6. Vue#表单控件绑定

    使用v-model 在表单控件上实现数据双向绑定. 单选:https://jsfiddle.net/miloer/bs49p0fx/ <input type="checkbox&quo ...

  7. 项目公共js(vue.js)

    var urlHead = "http://hm.runorout.com/";// var urlHead = "/";/*加入跑班相关*/var urlGe ...

  8. Vue.JS入门学习随笔

    PS:先说说学习Vue的缘由吧,学习完了React之后,突然发现又出了一款叫做vue的框架,而且据说可以引领又一波新框架的潮流,我容易吗我!!!   Vue.js(读音 /vjuː/, 类似于view ...

  9. vue视频学习笔记01

    video 1 vue:读音: v-u-eview vue到底是什么?一个mvvm框架(库).和angular类似比较容易上手.小巧mvc:mvpmvvmmv*mvx官网:http://cn.vuej ...

随机推荐

  1. 部署php程序报错解决---TP框架

    1.TP框架中 出现如下错误: 访问网站 http://192.168.0.204/ STORAGE_WRITE_ERROR_:./Runtime/Cache/Home/51620d75af91aa7 ...

  2. Spring----EJB

    EJB 是 Java EE 诸多规范之一,而 Spring 仅仅是一个框架并不是 Java EE. EJB 是百分百纯血统的 JCP 官方规范,而 Spring 是民间发起的框架. EJB 必须运行在 ...

  3. Golang基础(6)：go的net/http用法

    http包提供了HTTP客户端和服务端的实现 一:http客户端的几种方法 1. func (c *Client) Get(url string) (resp *Response, err error ...

  4. js中dom选择器

    document,getElementById("demo");    //通过id查询节点 . document.getElementsByTagName("div&q ...

  5. Java中File类的基本用法

    File类的基本用法 java.io.File类:代表文件和目录.在开发中,读取文件.生成文件.删除文件.修改文件的属性时经常会用到此类. File类的常用构造方法:public File(Strin ...

  6. 运维日常之机房浪潮服务器硬盘红灯亮起，服务器一直响，raid磁盘红色。。。故障解决方法

    按Ctrl+H进入到WebBIOS内,看见的错误如下所示: 错误是PDMissing,只不过维护的IBM服务器错误的磁盘不是第一块,而是第三块而已,不过坏哪块硬盘没有影响,重要的是错误的原因.这种错误 ...

  7. etcd租约机制

    新建租约 新建一个过期时间为120s的租约 # etcdctl lease grant lease 018f6d7bb11aba0d granted with TTL(120s) 查看新建的租约信息 ...

  8. [转帖]什么是 LLVM？Swift, Rust, Clang 等语言背后的支持

    要了解用于以编程方式生成机器原生代码的编译器框架是如何让新语言的推出以及对现有的语言进行增强比以往更加容易了. https://www.oschina.net/translate/what-is-ll ...

  9. Failure to transfer org.apache.maven.plugins:maven-resources-plugin:pom:2.6 的解决办法

    eclipse导入mavn工程报Failure to transfer org.apache.maven.plugins:maven-resources-plugin:pom:2.6 的解决办法: 错 ...

  10. DataLinkLayer(数据链路层)

    DataLinkLayer(数据链路层) The Reference Model(参考模型) layer name 5 Application layer 4 TransPort layer 3 Ne ...