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="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

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

<div id="add">

    <table>

    <thead>

        <tr>

            <th>总分排名</th>

            <th>名字</th>

            <th>数学</th>

            <th>语文</th>

            <th>英语</th>

            <th>学生总分</th>

        </tr>

    </thead>

    <tbody>

        <tr v-for="(v,i) in scoresTwo"  v-if="v.math>60&v.chinese>60&v.english>60">

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

                <td v-for="j in v">{{ j }}</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 real=[];

    for (i of scores){

       i.all =i.math + i.chinese + i.english;

       real.push(i)

    }

    // console.log(scores);

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

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

            if (real[j].all<real[j+1].all){

                let tmp=real[j];

                real[j]=real[j+1];

                real[j+1]=tmp

            }

        }

    }

    new Vue({

        el:'#add',

        data:{

            scoresTwo:real

        },

    })

</script>

</html>

Vue --- 指令练习的更多相关文章

  1. Vue指令总结---小白同学必看

    今天主要复习一下我们最熟悉vue指令,想要代码撸得快,就要多看书,多看看官方的文档和学习指令,学习编程是一个非常享受的过程,尤其是你不断地去解决问题,获得一项技能,实现薪水的上涨.进行Vue的指令烹饪 ...

  2. 一个能拖动，能调整大小，能更新bind值的vue指令-vuedragx

    一. 背景说明 开发一个可自定义组件化门户配置页面,期间采用了vue框架作为前端视图引擎,作为一个刚入手vue的萌新,开发第一个功能就遇到了拦路虎.需要一个拖动并且可改变大小的容器盒子.当时查看vue ...

  3. vue指令总结（二）

    一.vue指令 1.v-text v-text是用于操作纯文本,它会替代显示对应的数据对象上的值.当绑定的数据对象上的值发生改变,插值处的内容也会随之更新.注意:此处为单向绑定,数据对象上的值改变,插 ...

  4. vue指令与$nextTick 操作DOM的不同之处

    异步更新队列 可能你还没有注意到,Vue 异步执行 DOM 更新.只要观察到数据变化,Vue 将开启一个队列,并缓冲在同一事件循环中发生的所有数据改变.如果同一个 watcher 被多次触发,只会被推 ...

  5. vue指令概览

    原文 简书原文:https://www.jianshu.com/p/5fd47b7422fd 大纲 1.什么是vue指令 2.向指令中传入参数 3.指令中带入修饰符 4.指令的缩写 5.常见的vue指 ...

  6. vue 指令中el 的 parentNode 为空的问题

    在项目中,突然发现在用vue指令的时候,发现元素el的父元素parentNode变成了null. 代码: if (el.parentNode && !Vue.prototype.$_h ...

  7. vue指令用法

    vue指令 指令式带有 v- 前缀的特殊特性v-text和v-html都属于指令将数据和dom做关联,当表达式的值改变时,响应式地作用在视图 解决大胡子语法闪烁案例 [v-cloak] { dispa ...

  8. Vue框架（一）——Vue导读、Vue实例（挂载点el、数据data、过滤器filters）、Vue指令(文本指令v-text、事件指令v-on、属性指令v-bind、表单指令v-model)

    Vue导读 1.Vue框架 vue是可以独立完成前后端分离式web项目的js框架 三大主流框架之一:Angular.React.Vue vue:结合其他框架优点.轻量级.中文API.数据驱动.双向绑定 ...

  9. Vue框架（二）——Vue指令（v-once指令、v-cloak指令、条件指令、v-pre指令、循环指令）、todolist案例、Vue实例（计算、监听）、组件、组件数据交互

    Vue指令 1.v-once指令  单独使用,限制的标签内容一旦赋值,便不可被动更改(如果是输入框,可以主动修改) <!DOCTYPE html> <html lang=" ...

  10. vue指令大全~~~

    是的,这里有很全的vue指令使用~ 1.简单的vue应用 vue作为一个mvvm框架,想想为什么叫做mvvm? Model是负责数据的存储, View负责页面的展示 Model View 负责业务逻辑 ...

随机推荐

  1. Ubuntu 定时关机

    sudo shutdown +120 Shutdown scheduled for Sat 2019-09-21 23:48:44 CST, use 'shutdown -c' to cancel.

  2. JVM性能调优的6大步骤，及关键调优参数详解

    JVM性能调优方法和步骤1.监控GC的状态2.生成堆的dump文件3.分析dump文件4.分析结果,判断是否需要优化5.调整GC类型和内存分配6.不断分析和调整JVM调优参数参考 对JVM内存的系统级 ...

  3. python 之 面向对象（元类、__call__、单例模式）

    7.13 元类 元类:类的类就是元类,我们用class定义的类来产生我们自己的对象的,内置元类type是用来专门产生class定义的类 code=""" global x ...

  4. 《学渣Linux笔记》——关于.bashrc与profile（涉及交互式与非交互式、登录与非登录shell）

    <学渣Linux笔记>--关于.bashrc与profile(涉及交互式与非交互式.登录与非登录shell) 1.基本概念(个人理解) 交互式shell:等待用户输入,并执行相应操作的sh ...

  5. C 语言 基础篇

    1.机器语言 2.汇编语言 3.高级语言:C.C++.Java(基于虚拟机) C语言开发:Unix,Linux,Mac OS,iOS,Android,Windows,Ubuntu 开发环境:visua ...

  6. CLRS10.1-7练习 - 用双队列实现栈

    算法中心思想: 始终向非空队列进行入队操作 初始化时两个队列都为空,我们对q1进行入队操作 入栈: 只需执行其中一个队列入队操作即可, 具体操作哪一个队列,用一个标记变量标记 出栈流程图 代码实现 p ...

  7. Golang 常用的第三方包.

    Goland 下面这个license server 可用 http://idea.youbbs.org (2018-01-10 04:26:09) http://45.77.127.87:81(201 ...

  8. HTTP协议的认识

    1.内容回顾 1.HTTP协议消息的格式: 1.请求(request) 请求方法 路径 HTTP/1.1 \r\n k1:v1\r\n ...\r\n \r\n 请求体 <--这里可以有可以没有 ...

  9. 自学Python编程的第八天----------来自苦逼的转行人

    2019-09-18-21:11:24(初学者不会学博客,望大家见谅见谅) 今天学的内容是有关list..dict.set集合的使用方法和注意事项 list和dict在循环中不可删,而且list在迭代 ...

  10. 【转载】C#中List集合使用Contains方法判断是否包含某个对象

    在C#的List集合中,如果要查找List集合是否包含某一个值或者对象,如果不使用List集合类的扩展方法的话一般会使用for循环或者foreach遍历来查找,其实List集合类中的扩展方法Conta ...