v-for:

v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名。

demo1.

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title></title>

        <script src="../js/vue.js"></script>

    </head>

    <body>

        <div id="div1">

            <table align="center" >

                <tr class="firstLine">

                    <td>name</td>

                    <td>hp</td>

                </tr>

                <tr v-for="hero in heros">

                    <td>{{hero.name}}</td>

                    <td>{{hero.hp}}</td>

                </tr>

            </table>

        </div>

        <script>

            var data = [

                      {name:"a",hp:341},

                      {name:"b",hp:225},

                      {name:"c",hp:427},

                      {name:"d",hp:893}

                ];

            new Vue({

                  el: '#div1',

                  data: {

                      heros:data

                  }

                })

        </script>

    </body>

</html>

2.显示下标

<div id="div1">

            <table align="center" >

                <tr class="firstLine">

                    <td>name</td>

                    <td>hp</td>

                    <td>index</td>

                </tr>

                <tr v-for="hero,index in heros">

                    <td>{{hero.name}}</td>

                    <td>{{hero.hp}}</td>

                    <td>{{index}}</td>

                </tr>

            </table>
</div>

3.遍历数字

<div v-for="i in 10" style="margin-left: 25rem;">

                <td>{{i}}</td>

</div>

demo4

<div id="app">

            <ul>

                <li v-for="o in ob">

                    {{o}}

                </li>

                <br />

                <li v-for="(key ,value) in ob">

                    {{key}}:{{value}}

                </li>

                <br />

                <li v-for="(index,key,value) in ob">

                    {{index}} , {{key}} , {{value}}

                </li>

            </ul>

        </div>

        <script>

            new Vue({

                el:'#app',

                data:{

                    ob:{

                        name:'happy',

                        age:'111',

                        id:'11'

                    }

                }

            })

        </script>

Vue(三)--循环语句的更多相关文章

  1. vue.js循环语句

    vue.js循环语句 循环使用 v-for 指令. v-for 指令需要以 site in sites 形式的特殊语法, sites 是源数据数组, site 是数组元素迭代的别名. v-for 可以 ...

  2. Vue.js 循环语句

    循环使用 v-for 指令. v-for 指令需要以 site in sites 形式的特殊语法, sites 是源数据数组并且 site 是数组元素迭代的别名. v-for 指令: v-for 可以 ...

  3. 第十篇:vue.js for循环语句(大作业进行时)

    Vue.js 循环语句 <div id="app"> <ol> <li v-for="site in sites"> /*f ...

  4. JS基础（三）语句

    一.判断语句(PS:一般情况下判断条件最终应该是一个布尔值.) 1.if语句 1)基本格式 if(判断条件){ 如果判断条件成立则执行的语句 }else{ 如果判断条件不成立则执行的语句 } 2)扩展 ...

  5. Vue.js：循环语句

    ylbtech-Vue.js:循环语句 1.返回顶部 1. 循环语句 循环使用 v-for 指令. v-for 指令需要以 site in sites 形式的特殊语法, sites 是源数据数组并且 ...

  6. vue条件语句、循环语句、计算属性、侦听器监听属性

    因为 v-if 和v-for是一个指令,所以必须将它添加到一个元素上.但是如果想切换多个元素呢?此时可以把一个 <template> 元素当做不可见的包裹元素,并在上面使用 v-if.最终 ...

  7. Java语言----三种循环语句的区别

    ------- android培训.java培训.期待与您交流! ---------- 第一种:for循环 循环结构for语句的格式:       for(初始化表达式;条件表达式;循环后的操作表达式 ...

  8. 前端笔记知识点整合之JavaScript（三）关于条件判断语句、循环语句那点事

      一.条件分支语句 条件分支语句,也叫作条件判断语句,就是根据某种条件执行某些语句,不执行某些语句. JS中有三种语法是可以表示条件分支的 1.1 if……else…… 条件分支的主力语法,这个主力 ...

  9. 前端笔记之JavaScript（三）关于条件判断语句、循环语句那点事

    一.条件分支语句 条件分支语句,也叫作条件判断语句,就是根据某种条件执行某些语句,不执行某些语句. JS中有三种语法是可以表示条件分支的 1.1 if……else…… 条件分支的主力语法,这个主力语法 ...

随机推荐

  1. 【C++】C++程序链接失败，无法解析的外部命令，无法解析的外部符号 "private: static class * Object::current"

    C++程序编译结束后,出现链接失败提示: 严重性    代码    说明    项目    文件    行    类别    禁止显示状态错误    LNK2001    无法解析的外部符号 &quo ...

  2. NR / 5G - MAC Overview

  3. sql 忘记密码 解决方法(window cmd命令解决)

    cd wamp\bin\mysql\mysql5.6.17\bin mysqld --skip-grant-tables

  4. C++ 类的赋值运算符'='重载

    什么类需要重载赋值运算符 先来看一个普通类的直接赋值. #include <iostream> using namespace std; class person{ int age; pu ...

  5. sun.misc.Unsafe中一些常用方法记录

    sun.misc.Unsafe中一些常用方法记录 前情摘要 sun公司提供了可以用于直接操作内存的类,这个类就是sun.misc.Unsafe.因为Java本身是不会涉及到直接操作内存的,Java A ...

  6. light oj 1067 费马小定理求逆元

    题目链接:http://www.lightoj.com/volume_showproblem.php?problem=1067 1067 - Combinations Given n differen ...

  7. 前缀和&差分

    一:差分数组概念  一.差分数组的定义及用途 1.定义:对于已知有n个元素的数列d,建立记录它每项与前一项差值的差分数组f:显然,f[1]=d[1]-0=d[1];对于整数i∈[2,n],我们让f[i ...

  8. 浅析word2vec（一）

    1 word2vec 在自然语言处理的大部分任务中,需要将大量文本数据传入计算机中,用以信息发掘以便后续工作.但是目前计算机所能处理的只能是数值,无法直接分析文本,因此,将原有的文本数据转换为数值数据 ...

  9. Codeforces 1301B Motarack's Birthday（二分）

    题目链接:http://codeforces.com/problemset/problem/1301/B 思路: (1)都是-1的情况 (2)只有一个除-1之外的数 (3)至少有两个除-1之外的不同的 ...

  10. OpenCASCADE(一) VS2017+OpenCASCADE+MFC 下载配置安装运行单文档程序画个基本图形

    原文作者:aircraft 原文链接:https://www.cnblogs.com/DOMLX/p/12368154.html 一.下载OpenCASCADE 官网下载是: http://www.o ...