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. Word 频繁无响应

    可以参考以下方法,这是我的解决办法,不保证对你也有用. 步骤一: 在「开始 > 运行」中输入「winword /a」进入无加载项 Word: 依次进入「Word 选项 > 高级 > ...

  2. Delphi RSA加解密【 (RSA公钥加密，私钥解密)、(RSA私钥加密，公钥解密)、MD5加密、SHA加密】

    作者QQ:(648437169) 点击下载➨delphi RSA加解密 [Delphi RSA加解密]支持 (RSA公钥加密,私钥解密).(RSA私钥加密,公钥解密).MD5加密.SHA1加密.SHA ...

  3. 读文件时出现这个错误 'utf-8' codec can't decode byte 0xba in position 21: invalid start byte

    ''' file2 文件内容: 很任性wheniwasyoung ''' 源代码: f = open("file2",'r',encoding="utf-8") ...

  4. Shell编程学习（七）

    if 条件语句的知识与实践 if 条件语句 if条件语句的语法 单分支结构 第一种 if <条件测试表达式> then 指令 fi 第二种 if <条件测试表达式>; then ...

  5. The four Day 给出一个平衡字符串,将它分割成尽可能多的平衡字符串

    """ 在一个「平衡字符串」中,'L' 和 'R' 字符的数量是相同的. 给出一个平衡字符串 s,请你将它分割成尽可能多的平衡字符串. 返回可以通过分割得到的平衡字符串的 ...

  6. spring Boot 学习（二、Spring Boot与缓存）

    一.概述1. 大多应用中,可通过消息服务中间件来提升系统异步通信.扩展解耦能力 2. 消息服务中两个重要概念: 消息代理(message broker)和目的地(destination) 当消息发送者 ...

  7. Java框架之MyBatis框架（二）

    Mybatis框架是相对于优化dao层的框架,其有效的减少了频繁的连接数据库(在配置文件xml中进行配置),将sql语句与java代码进行分离(写在XXXXmapper.xml文件中,一个表对应一个x ...

  8. iOS多线程GCD简介（一）

    之前讲过多线程之NSOperation,今天来讲讲代码更加简洁和高效的GCD.下面说的内容都是基于iOS6以后和ARC下. Grand Central Dispatch (GCD)简介 Grand C ...

  9. unity读取Texture文件并转为Sprit

    using System.Collections; using System.Collections.Generic; using System.IO; using UnityEngine; usin ...

  10. linux 中常遇到的问题

    1.上传文件是速度为零 xshell连接对应的Ubuntu服务器上在Ubuntu服务器上安装lrzszsudo apt install lrzsz xshell连接对应的centos服务器上 yum  ...