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. SQL Server 特殊字符及中文汉字的处理

    简介 在SQL Server 中很多时候需要对一些字段中特殊的字符做处理,比如某个字段中包含一些回车.制表.换行等特殊字符(这些字符往往来源于Excel).这些特殊字符的存在可能导致无法提取到所需数据 ...

  2. shoshana-技术文集

    20190422 全球最厉害的 14 位程序员,请收下我的膝     20190423 观察者模式(Observer)和发布(Publish/订阅模式(Subscribe)       2019042 ...

  3. MySQL单机优化---SQL优化

    SQL优化(变多次维护为一次维护) Sql优化分为:DDL.DML.DQL 一.DDL优化 1 .通过禁用索引来提供导入数据性能 . 这个操作主要针对有数据库的表,追加数据 //去除键 alter t ...

  4. Python之路【第十七篇】:Python并发编程|协程

    一.协程 协程,又叫微线程,纤程.英文名Coroutine.协程本质上就是一个线程 优点1:协程极高的执行效率.因为子程序切换不是线程切换,而是由程序自身控制,因此,没有线程切换的开销,和多线程比,线 ...

  5. 英语propretie房产

    property (英文释义)  英 ['prɒpəti] 美 ['prɑːpərti] n.财产:所有物:地产,房地产:性质:道具 中文名:房产财产地产 外文名:property.propreti ...

  6. VMware Workstation 15 Player使用centos页面版本如何查看ip

    首先运行要使用的centos镜像,输入密码登陆进去 因为是界面版,所以就不需要再镜像中输入命令,但是因为这样又找不到没法用ifconfig查看ip怎么办?  这个就是类似于一个系统页面版本的linux ...

  7. 从实践到原理，带你参透 gRPC

    gRPC 在 Go 语言中大放异彩,越来越多的小伙伴在使用,最近也在公司安利了一波,希望这一篇文章能带你一览 gRPC 的巧妙之处,本文篇幅比较长,请做好阅读准备.本文目录如下: 简述 gRPC 是一 ...

  8. modbus协议使用小记

    下载了libmodbus库,交叉编译后运行,总是接收回复时不正确.原因不明. 由于使用到modbus的需求比较简单,所以选择直接拼出modbus的请求报文,然后用串口直接发送和接收的方式, 拼modb ...

  9. MVC运行机制[转]

    原:http://www.cnblogs.com/jyan/archive/2012/06/29/2569566.html#3122335 ASP.NET是一种建立动态Web应用程序的技术.它是.NE ...

  10. Python报错：ImportError: cannot import name 'ConnectionRefusedError'

    启动了一个flask server,结果报了标题中的错误. ImportError: cannot import name 'ConnectionRefusedError' 解决: pip insta ...