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. Ribbon和Nignx的区别

    Ribbon属于客户端负载均衡:在调用接口的时候,会通过服务别名到eureka上获取服务的信息列表,缓存到jvm本地,在本地采用RPC远程调用技术去调用接口,实现负载均衡.可以设置调用的规则是请求总数 ...

  2. A记录（主机名解析）、CNAME（别名解析）和URL转发（域名转发）

    什么是 A记录(主机名解析).CNAME(别名解析)和URL转发(域名转发)? A记录(主机名解析)是最普通的域名解析,是把某一主机名解析到一个IP. 例如www.***.com-> 20.10 ...

  3. javascript两种循环写法

    var i=0,len=cars.length; for (; i<len; ) { document.write(cars[i] + "<br>"); i++; ...

  4. UV数据与风速风向数据转换

    package com.qr.util; import java.text.DecimalFormat; /** * //TODO UV数据与风速风向数据转换 */ public class UVAn ...

  5. php mysql的储存过程 实现批量更新

    UPDATE newhouse_clicks SET clicks = CASE id WHEN 1 THEN 1000 WHEN 2 THEN 2000 WHEN 3 THEN 3000 END W ...

  6. 【rt-thread】2、尝试用ENV添加18b20传感器

    尝试用ENV添加18b20传感器 rt-thread能通过env工具添加或者裁剪工程,这里调试的是通过ENV添加18b20传感器. 具体程序实现,可以参考以下资料 https://www.rt-thr ...

  7. 【题解】Luogu P5279 [ZJOI2019]麻将

    原题传送门 希望这题不会让你对麻将的热爱消失殆尽 我们珂以统计每种牌出现的次数,不需要统计是第几张牌 判一副牌能不能和,类似这道题 对于这题: 设\(f[i][j][k][0/1]\)表示前\(i\) ...

  8. mysql 复制表结构（包括索引等）、表内容

    =============================================== 2019/7/16_第1次修改                       ccb_warlock == ...

  9. Kafka启用SASL_PLAINTEXT动态配置JAAS文件的几种方式

    Kafka是广泛使用消息服务,很多情况下关于认证部分我都是默认的配置,也就是不需要用户名/密码,也不配置证书.在内网或者在项目组内部可以,但是设计的跨部门时一般处于安全考虑都需要加上认证,防止kafk ...

  10. Spring-Boot之Admin服务监控-9

    一.Spring Boot Admin用于管理和监控一个或者多个Spring Boot程序.Spring Boot Admin分为Server端和Client 端,Client端可以通过向Http S ...