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. 自动化测试用例中的raise

    1.一次自动化测试学习中,expect异常中包含“raise e”,这是什么意思呢? 2.网上查了一下,大概意思是:若有异常,不会执行一下的操作,但是明明是语句后确实没有其他语句呀. 3.注释掉之后, ...

  2. Git 小课堂 004

    rebase--变基,就是这个可能会把事情搞得一团糟的操作. 对于变基,我只能说,需要一个配合默契的团队,你们心灵想通,互相了解,然后你们会做出非常漂亮的事情.对于使用变基且几乎不会出问题的团队,我一 ...

  3. C#基础知识学习（1）方法的重写和隐藏

    做了1年多了C#,发现些项目过程中很多基础东西都不是很清晰,基础不够牢固.现在开始复习基础知识并做重点记录 方法需要被重写的时候,可以在方法前加入virtual使方法变成虚方法. 这样我们可以重新写个 ...

  4. Java面试—消息队列

    消息队列面试题 题目来自于中华石杉,解决方案根据自己的思路来总结而得. 题目主要如下: 1. 为什么要引入消息队列? 消息队列的引入可以解决3个核心问题: 解耦 异步 削峰 解耦 在一个项目中,如果一 ...

  5. package包

    为什么需要package? 为了解决类之间的重名问题.为了方便管理类,合适的类放在合适的包. 怎么用package? 通常是类的第一句非注释性语句. 包名,域名倒着写,加上模块名,并与内部管理类. 命 ...

  6. 【React Native错误集】* What went wrong: Execution failed for task ':app:installDebug'.

    错误1:* What went wrong: Execution failed for task ':app:installDebug'. > com.android.builder.testi ...

  7. Android布局管理器-使用TableLayout表格布局管理器实现简单的用户登录页面

    场景 Android布局管理器-使用FrameLayout帧布局管理器显示层叠的正方形以及前景照片: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article ...

  8. mysql删除索引

    删除索引 删除索引可以使用ALTER TABLE或DROP INDEX语句来实现.DROP INDEX可以在ALTER TABLE内部作为一条语句处理,其格式如下: drop index index_ ...

  9. 彻底理解Windows认证1

    彻底理解Windows认证 一.Windows本地认证 1. 我的密码在哪里? 路径:C:\Windows\System32\config\SAM 当我们登录系统的时候,系统会自动的读取SAM文件中的 ...

  10. kubernetes监控

    总体设计思想 总体设计架构图Kubernetes monitoring architecture 设计介绍 监控分成两个部分 核心指标流程 包括的组件有 kubelet.resource estima ...