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. HDU_5729_rmq+二分

    http://acm.hdu.edu.cn/showproblem.php?pid=5726 rmq修改成gcd的,关键是找个数,用二分来找,刚开始理解了好久,因为每个区间内gcd是递减的,所以可以优 ...

  2. JavaScript 与 Java 有什么不同？

    JavaScript 编程语言是由 Netscape,Inc. 开发的,它并不是 Java 平台的一部分. JavaScript 不会创建小应用程序或独立应用程序.在最常见的形式中,JavaScrip ...

  3. RocketChat：开源聊天软件部署

    1. 简介 RocketChat是一款优秀的开源聊天软件.支持各种平台,IOS.Android.Web.Mac.Windows以及Linux,安装部署简单,功能简单易用,目前部分功能还在完善当中,特别 ...

  4. 提升命令行效率的Bash快捷键

    转自:http://linuxtoy.org/archives/bash-shortcuts.html 生活在 Bash shell 中,熟记以下快捷键,将极大的提高你的命令行操作效率. 大部分对其他 ...

  5. javascript 客户端webSocket示例

    //html <script> // 初始化一个 WebSocket 对象 var ws = new WebSocket("ws://localhost:9998/echo&qu ...

  6. 今天第一天开通博客，随笔总结一下resultType（属性）和resultMap，collection和association，Statement和PreparedStatement各自的区别

    1.resultType(属性)和resultMap(标签引用)的区别? resultType不支持自定义返回结果,会将查询到的结果通过到type中java对象的同名的属性,对象中的属性名必须和数据库 ...

  7. mysql中大数据表alter增加字段报错："1034 Incorrect key file for table 'table_name'; try to repair it"

    mysql中大数据表alter增加字段报错:"1034 Incorrect key file for table 'table_name'; try to repair it" 现 ...

  8. centos6.5和centos7.5统一字符集为zh_CN.UTF-8解决系统和MySQL数据库乱码问题

    linux的服务器需要做的操作 centos6.5下: 修改默认字符集为 zh_CN.UTF-8,如果没有中文语言包可能需要安装中文语言包支持 [root@meinv01 ~]# yum groupi ...

  9. python pandas合并多个excel(xls和xlsx)文件（弹窗选择文件夹和保存文件）

    # python pandas合并多个excel(xls和xlsx)文件(弹窗选择文件夹和保存文件) import tkinter as tk from tkinter import filedial ...

  10. 远程连接Linux下mysql报10061

    最近接到一个新活,四台Linux服务器配置MySQL热机双备+IP隧道LVS集群服务,尽管好想使个眼神杀死老大,但特么心里是感激的.不多说一口气装了n个Ubuntu-server. 每次在虚拟机装完M ...