渲染学生信息

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<div id="hmwk">

    <table>

        <tr v-for="(score,j) in scores" v-if="j == 0">

            <th>rank</th>

            <th v-for="(v,k,i) in score"  >{{ k }}</th>

            <th>total</th>

        </tr>

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

            <td>{{ }}</td>

            <td v-for="(v,k,j) in obj"  v-if="obj.math>60&&obj.chinese>60&&obj.english>60">{{ v }}</td>

            <td v-if="obj.math>60&&obj.chinese>60&&obj.english>60">{{ sum(obj.math,obj.chinese,obj.english,obj.name) }}</td>

        </tr>

    </table>

    <!--obj.math+obj.chinese+obj.english -->

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

    <script>

        // let arr = [0,400];

        let arr1 = [];

        let dic1 = {};

        new Vue ({

            el:"#hmwk",

            data:{

                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},

                ],

                dic:dic1,

            },

            methods:{

                sum(a,b,c,d){

                    let count = 0 ;

                    count = a+b+c;

                    // for (let k=0; k<arr.length-1; k++){

                    //     if (arr[k]<count<arr[k+1]){

                    //         arr.splice(k+1,0,count)

                    //     }

                    // }

                    arr1.push(count);

                    arr1.sort();

                    for (let k=0; k<arr1.length; k++) {

                        dic1[arr1[k]]= k+1

                    }

                    console.log(dic1);

                    console.log(arr1);

                    return count

                },

            }

        })

    </script>

</div>

</body>

</html>

vue渲染学生信息的更多相关文章

  1. 学习完vue指令 做的一个学生信息录入系统

    一.demo实现原理 输入完个人信息后  点击创建用户  数据就会显示在下面的表格中 用到了vue中的数据双向绑定 v-model v-for 还要js正则 数组的unshift splice 等方法 ...

  2. Vue实现一个学生信息录入系统，实现录入和删除

    效果如下: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...

  3. Node.js小项目——学生信息管理系统

    这是迄今为止第一次接触后端的东西,是一个很小的项目,但是对于前端学习入门很好.我是先学了VUE框架再学的Node,学起来比较轻松,不过每个人都有自己的学习方法️ 一.项目描述 学生信息管理系统,可以实 ...

  4. Ligerui Grid组件--学生信息列表

    一.目录 1.多层架构+MVC+EF+AUTOFAC+AUTOMAPPER: 2.MVC中验证码的实现(经常用,记录备用) 3.Ligerui首页的快速搭建 4.Ligerui Grid组件--学生信 ...

  5. 从虚拟dom了解vue渲染函数

    vue渲染函数就是render函数,他会返回一个VNode,VNode是一个js对象,是dom的映射 vue在介绍渲染函数那个章节看的不是很懂,所以想要彻底的理解渲染函数,首先需要了解vue的虚拟do ...

  6. Vue渲染函数

    前面的话 Vue 推荐在绝大多数情况下使用 template 来创建HTML.然而在一些场景中,真的需要 JavaScript 的完全编程的能力,这就是 render 函数,它比 template 更 ...

  7. node.js(小案例)_实现学生信息增删改

    一.前言 本节内容主要对小案例做一个总结: 1.如何开始搭建小项目 2.路由设计 3.模块应用 4.项目源码以及实现过程github地址: 项目演示如下: 二.主要内容 1.项目的关键性js源码: 项 ...

  8. 数据结构（c语言）之学生信息管理系统

    程序思维导图 代码表示(代码参考:长春大学-牛言涛老师) 如有错误请指出欢迎交流 #include<stdio.h> #include<malloc.h>//动态存储分配函数头 ...

  9. 基于数据库MySQL的简易学生信息管理系统

    通过这几天学习Mysql数据库,对其也有了基本的了解,为了加深印象,于是就写了一个最简易的学生信息管理系统. 一:基本要求 1.通过已知用户名和密码进行登录: 2.可以显示菜单: 3.可以随时插入学生 ...

随机推荐

  1. 如何妥善处理WebBrowser对Javascript的错误问题，阻止JS弹出框，提高用户体验

    由于项目需求,最近转战客户端,开始搞浏览器开发.众所周知,现在在微软平台上开发浏览器,最常用的方法就是扩展Webbrowser,但是首先要清楚的是,WebBrowser控件仅仅是对WebBrowser ...

  2. Ln- Linux必学的60个命令

    1.作用 ln命令用来在文件之间创建链接,它的使用权限是所有用户. 2.格式 ln [options] 源文件 [链接名] 3.参数 -f:链结时先将源文件删除. -d:允许系统管理者硬链结自己的目录 ...

  3. spring_配置处理器对象、处理器映射器、处理器适配器、视图解析器

    创建spring配置文件:application-context.xml. 创建处理器类 package com.lanou.demo.controller;public class BookCont ...

  4. HZOI20190821模拟28题解

    题面:https://www.cnblogs.com/Juve/articles/11390839.html 所有官方正解在我的文件里 A. 虎 算法1:我们发现非关键边与黑色边去掉以后,答案就是将所 ...

  5. leyou_04_vue.js的ajax请求方式

    1.异步查询数据,自然是通过ajax查询,大家首先想起的肯定是jQuery.但jQuery与MVVM的思想不吻合,而且ajax只是jQuery的一小部分.因此不可能为了发起ajax请求而去引用这么大的 ...

  6. 前端面试题之一HTML

    一.doctype作用? 严格模式与混杂模式如何区分?它们有何意义? (1)<!doctype>声明位于文档中的最前面的第一行,其作用告知浏览器用什么标准解析这个文档,并以浏览器支持的最高 ...

  7. bzoj4788: [CERC2016]Bipartite Blanket

    2019.1.9交流题,现在看还是不会,,, 如果只有一边,那么Hall定理即可. 两边?分别满足Hall定理,就是合法的! 证明(构造方案): 左集合先任意形成一个合法匹配,单点增量加入右集合和与右 ...

  8. 浅谈Python小数据池

    什么是小数据池 小数据池是python中提高效率的一种方式,固定数据类型的相同值使用同一内存地址. id 用于获取开辟空间的内存地址 代码块 一个文件,一个模块,一个函数,一个类,终端中的每一行代码都 ...

  9. jmeter体系结构

    jmeter体系结构 jmeter体系结构: 1.取样器.断言.监听器组合在一起就可以帮助我们完成发送请求.验证结果及记录结果三项工作 (1)取样器的访问路径:[测试计划]---[线程组]       ...

  10. Jmeter运行原理

    Jmeter运行原理: JMETER是运行在JVM虚拟机上的,每个进程的开销比loadrunner的进程开销大,如果以进程的方式来运行每台负载机上的进程数量不会允许太多,当有大量并发时就需要大量的负载 ...