v-for:

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

demo1.

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title></title>
  6.         <script src="../js/vue.js"></script>
  7.     </head>
  8.     <body>
  9.         <div id="div1">
  10.             <table align="center" >
  11.                 <tr class="firstLine">
  12.                     <td>name</td>
  13.                     <td>hp</td>
  14.                 </tr>
  15.                 <tr v-for="hero in heros">
  16.                     <td>{{hero.name}}</td>
  17.                     <td>{{hero.hp}}</td>
  18.                 </tr>
  19.             </table>
  20.         </div>
  21.         <script>
  22.             var data = [
  23.                       {name:"a",hp:341},
  24.                       {name:"b",hp:225},
  25.                       {name:"c",hp:427},
  26.                       {name:"d",hp:893}
  27.                 ];
  28.             new Vue({
  29.                   el: '#div1',
  30.                   data: {
  31.                       heros:data
  32.                   }
  33.                 })
  34.         </script>
  35.     </body>
  36. </html>

2.显示下标

  1. <div id="div1">
  2.             <table align="center" >
  3.                 <tr class="firstLine">
  4.                     <td>name</td>
  5.                     <td>hp</td>
  6.                     <td>index</td>
  7.                 </tr>
  8.                 <tr v-for="hero,index in heros">
  9.                     <td>{{hero.name}}</td>
  10.                     <td>{{hero.hp}}</td>
  11.                     <td>{{index}}</td>
  12.                 </tr>
  13.             </table>
    </div>

3.遍历数字

  1. <div v-for="i in 10" style="margin-left: 25rem;">
  2.                 <td>{{i}}</td>
  3. </div>

demo4

  1. <div id="app">
  2.             <ul>
  3.                 <li v-for="o in ob">
  4.                     {{o}}
  5.                 </li>
  6.                 <br />
  7.                 <li v-for="(key ,value) in ob">
  8.                     {{key}}:{{value}}
  9.                 </li>
  10.                 <br />
  11.                 <li v-for="(index,key,value) in ob">
  12.                     {{index}} , {{key}} , {{value}}
  13.                 </li>
  14.             </ul>
  15.         </div>
  16.         <script>
  17.             new Vue({
  18.                 el:'#app',
  19.                 data:{
  20.                     ob:{
  21.                         name:'happy',
  22.                         age:'111',
  23.                         id:'11'
  24.                     }
  25.                 }
  26.             })
  27.         </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. 计蒜客A1998 Ka Chang (分块+dfs序+树状数组)

    题意 给你一个\(1e5\)的有点权的树,有\(1e5\)个操作: 1.给第\(x\)层的点加上\(y\) 2.求以\(x\)为根的子树的点权和 思路 首先处理出层数为x的所有点 操作2一般都是用df ...

  2. 牛客练习赛39 B 选点（dfs序+LIS）

    题意: 有一棵n个节点的二叉树,1为根节点,每个节点有一个值wi.现在要选出尽量多的点. 对于任意一棵子树,都要满足: 如果选了根节点的话,在这棵子树内选的其他的点都要比根节点的值大: 如果在左子树选 ...

  3. Zabbix：主动模式

    简介 Zabbix 是由 Alexei Vladishev 开发的一种网络监视.管理系统,基于 Server-Client 架构.可用于监视各种网络服务.服务器和网络机器等状态,官方站点:https: ...

  4. 9.3.2 map端连接-CompositeInputFormat连接类

    1.1.1         map端连接-CompositeInputFormat连接类 (1)使用CompositeInputFormat连接类需要满足三个条件: 1)两个数据集都是大的数据集,不能 ...

  5. 万字分享，我是如何一步一步监控公司MySQL的？

    整理了一些Java方面的架构.面试资料(微服务.集群.分布式.中间件等),有需要的小伙伴可以关注公众号[程序员内点事],无套路自行领取 更多优选 一口气说出 9种 分布式ID生成方式,面试官有点懵了 ...

  6. 极简估值教程——第一篇 速判估值与PEG的推导

    来自盛京剑客的雪球原创专栏 一.极简速判估值怎么判? 很简单.简单到粗暴. 用PEG PEG=PE/(g*100)=1.0 什么意思? PE市盈率,g未来收益增长率,PEG为1.0合理估值,大于1.0 ...

  7. 使用Unicode(宽字节字符集)；多字节字符集中定义宽字节变量

    2012-03-25 14:54 (分类:计算机程序) 2.2 宽字符和C 宽字符不一定是Unicode.Unicode是宽字符集的一种.然而,因为本书的焦点是Windows而不是C执行的理论,所以书 ...

  8. 一键安装MySQL5.6.43脚本

    [root@lamp ~]# cat /server/scripts/mysql-5.6.43_install.sh #!/bin/bash #卸载系统自带的Mysql /bin/rpm -e $(/ ...

  9. python安装模块速度慢的解决方法

    1.Win+R,cmd 2.pip install pqi 3.pqi use aliyun

  10. AOP in .NET

    AOP in .NET AOP是所有现代OOP语言开发框架中的基础功能,随着Spring框架的普及,对于AOP的使用已经像喝水一样普通.可是知其然还要其所以然.本文将基于.NET环境探讨实现AOP的底 ...