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. python 内置模块之os、sys、shutil

    一.OS模块 用于提供系统级别的操作. OS 目录和文件 os.getcwd() 获取当前工作目录,即当前python脚本工作的目录路径 os.chdir("dirname") 改 ...

  2. 使用Redis需要注意的几点

    Redis作为缓存中间件,被广泛应用在各类系统,用来提升系统性能和吞吐,下面总结几点开发人员在使用Redis时需要考虑的几个关键点: 一. key的设计 1. key命名规范:为了避免不必要的麻烦,我 ...

  3. 终于成功部署 Kubernetes HPA 基于 QPS 进行自动伸缩

    昨天晚上通过压测验证了 HPA 部署成功了. 所使用的 HPA 配置文件如下: apiVersion: autoscaling/v2beta2 kind: HorizontalPodAutoscale ...

  4. Nodejs中，path.join()和path.resolve()的区别

    在说path.join()和path.resolve()的区别之前,我先说下文件路径/和./和../之间的区别 /代表的是根目录: ./代表的是当前目录: ../代表的是父级目录. 然后再来说下pat ...

  5. python函数定义中引用外部变量的一个问题

    如果在函数定义的默认值中引用了一个外部变量,如下所示 x = 3 def func(a = x): print(a, x) 那么a的默认值就会是3, 但是print语句中的x会是调用时的x值 lamb ...

  6. 我不知道的js（一）作用域与闭包

    作用域与闭包 作用域 什么是作用域 作用域就是一套规则,它负责解决(1)将变量存在哪儿?(2)如何找到变量?的问题 作用域工作的前提 谁赋予了作用域的权利?--js引擎 传统编译语言编译的过程 分词/ ...

  7. GO的方法值和方法表达式用法

    手册上关于这块的解释感觉不是很详细清晰,经过几个示例自己总结了下这块的用法. 方法表达式:说简单点,其实就是方法对象赋值给变量. 这里有两种使用方式: 1)方法值:隐式调用, struct实例获取方法 ...

  8. ABP框架迁移到Mysql

    ABP框架 .NetCore3.x版本 1.首先找到xxx.Core 项目,添加引用Microsoft.EntityFrameworkCore.Tools 2.找到xxx.EntityFramewor ...

  9. .net core 3 web api jwt 一直 401

    最近在给客户开发 Azure DevOps Exension, 该扩展中某个功能需要调用使用 .NET Core 3 写的 Web Api. 在拜读了 Authenticating requests ...

  10. 大白话工厂方法模式（Factory Method）

    目录 简单工厂模式缺陷 简单工厂模式改造 工厂方法模式定义 工厂方法模式结构 工厂方法模式分析 参考文献 简单工厂模式缺陷 大白话简单工厂模式(Simple Factory Pattern)中通过买车 ...