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. iframe高度自适应的方法

    第一种:iframe内容未知,高度可预测 这个时候,我们可以给它添加一个默认的CSS的min-height值,然后同时使用JavaScript改变高度.常用的兼容代码有: // document.do ...

  2. 手撕面试官系列（四 ）：MongoDB+Redis 面试专题

    MongoDB   (面试题+答案领取方式见侧边栏) 你说的 NoSQL 数据库是什么意思?NoSQL 与 RDBMS 直接有什么区别?为什么要使用和不使用NoSQL 数据库?说一说 NoSQL 数据 ...

  3. java.lang.IllegalArgumentException: Invalid character found in method name. HTTP method names must be tokens

    请求的协议不对  解决方案: 把请求的https改成http 

  4. 【leetcode-78 dfs+回溯】 子集

    子集 给定一组不含重复元素的整数数组 nums,返回该数组所有可能的子集(幂集). 说明:解集不能包含重复的子集. 示例: 输入: nums = [1,2,3] 输出: [ [3],   [1],   ...

  5. vim安装 YCM 过程记录

    YCM(YouComplateMe) 属于Vim中大神级的插件,提供了类似于巨硬爸爸的VS中的代码补全,但是其安装方式也是比较复杂,因此特意写下一篇记录,记录下我自己如何安装这一插件的过程: 检查自己 ...

  6. mongodb常规操作语句

    db.c_user.insertOne({ name: "ljm", pwd: "123456" }); //插入一个 db.c_user.insertMany ...

  7. C#——零散学习

    C#——零散学习0 //控制台输入字符串,转化为int,double,float等数值类型: //Convert.ToXXX32();函数. Convert.ToInt32(); //把字符串转换为i ...

  8. Linux Shell/Bash wildcard通配符、元字符、转义符使用

    说到shell通配符(wildcard),大家在使用时候会经常用到.下面是一个实例: 1   1 2 3 4 [chengmo@localhost ~/shell]$ ls a.txt  b.txt  ...

  9. JavaScript前端和Java后端的AES加密和解密(转)

    在实际开发项目中,有些数据在前后端的传输过程中需要进行加密,那就需要保证前端和后端的加解密需要统一.这里给大家简单演示AES在JavaScript前端和Java后端是如何实现加密和解密的. java端 ...

  10. [golang]按图片中心旋转后的新图左顶点和原图左顶点的偏移量计算

    1 前言 略,作为记录使用 2 代码 /** * @Author: FB * @Description: * @File: RotateSample.go * @Version: 1.0.0 * @D ...