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

HTML

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>

<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>

</head>

<body>

<div id="app">

  <ol>

    <li v-for="site in sites">

      {{ site.name }}

    </li>

  </ol>

</div>

<script>

new Vue({

  el: '#app',

  data: {

    sites: [

      { name: 'Runoob' },

      { name: 'Google' },

      { name: 'Taobao' }

    ]

  }

})

</script>

</body>

</html>

效果：

v-for 迭代对象

HTML

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>

<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>

</head>

<body>

<div id="app">

  <ul>

    <li v-for="value in object">

    {{ value }}

    </li>

  </ul>

</div>

<script>

new Vue({

  el: '#app',

  data: {

    object: {

      name: '菜鸟教程',

      url: 'http://www.runoob.com',

      slogan: '学的不仅是技术，更是梦想！'

    }

  }

})

</script>

</body>

</html>

效果：

遍历对象key-value

HTML

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>

<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>

</head>

<body>

<div id="app">

  <ul>

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

    {{ key }} : {{ value }}

    </li>

  </ul>

</div>

<script>

new Vue({

  el: '#app',

  data: {

    object: {

      name: '菜鸟教程',

      url: 'http://www.runoob.com',

      slogan: '学的不仅是技术，更是梦想！'

    }

  }

})

</script>

</body>

</html>

效果：

遍历对象key-value 带索引

HTML

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>

<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>

</head>

<body>

<div id="app">

  <ul>

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

     {{ index }}. {{ key }} : {{ value }}

    </li>

  </ul>

</div>

<script>

new Vue({

  el: '#app',

  data: {

    object: {

      name: '菜鸟教程',

      url: 'http://www.runoob.com',

      slogan: '学的不仅是技术，更是梦想！'

    }

  }

})

</script>

</body>

</html>

效果：

v-for 迭代整数

HTML

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>

<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>

</head>

<body>

<div id="app">

  <ul>

    <li v-for="n in 10">

     {{ n }}

    </li>

  </ul>

</div>

<script>

new Vue({

  el: '#app'

})

</script>

</body>

</html>

效果：

VueJS循环语句：v-for的更多相关文章

  1. 你可能不知道的java、python、JavaScript以及jquary循环语句的区别

    一.概述 java循环语句分为四种形式,分别是 while, do/while, for, foreach: python中循环语句有两种,while,for: JavaScript中循环语句有四种, ...

  2. 序列for循环语句

    序列for循环语句 序列for循环语句允许重复遍历一组序列,而这组序列可以是任何可以重复遍历的序列,如由begin()和end()函数定义的STL序列.所有的标准容器都可用作这种序列,同时它也同样可以 ...

  3. Swift流程控制之循环语句和判断语句详解

    Swift提供了所有c类语言的控制流结构.包括for和while循环来执行一个任务多次:if和switch语句来执行确定的条件下不同的分支的代码:break和continue关键字能将运行流程转到你代 ...

  4. javascript里的循环语句

    前序:我一直对于for跟for..in存在一种误解,我觉得for都能把事情都做了,为啥还要for...in...这玩意了,有啥用,所以今天就说说JavaScript里的循环语句. 循环 要计算1+2+ ...

  5. go语言的条件语句和循环语句

    一,条件语句 常见的就是if语句: 单支条件语句:     if   条件 :执行语句   (注,如果是没有逻辑运算符连接的话,是可以不需要括号的,也可以加上括号,如:if (条件):执行语句) 双支 ...

  6. shell脚本学习—条件测试和循环语句

    条件测试 1. 条件测试:test [ 命令test或[可以测试一个条件是否成立,如果测试结果为真,则该命令的Exit Status为0,如果测试结果为假, 则命令的Exit Status为1(注意与 ...

  7. 【shell】shell编程（四）-循环语句

    上篇我们学习了shell中条件选择语句的用法.接下来本篇就来学习循环语句.在shell中,循环是通过for, while, until命令来实现的.下面就分别来看看吧. for for循环有两种形式: ...

  8. Python循环语句及函数的定义

      循环语句¶ 重复执行某一个固定的动作或者任务 语法 for 变量 in序列: 语句1 语句2 ..... In [2]: # 列表知识只是以后会讲 # 比如[1,2,3,4,5,6,7] list ...

  9. 循环语句for基本概述

    循环语句for基本概述 01. for循环基础语法 for 变量名 in [ 取值列表 ]do 循环体done 02. for循环基本使用示例 #取值列表有多种取值方式,可以直接读取in后面的值,默认 ...

随机推荐

  1. java 后台封装json数据学习总结（二）

    一.JSONArray的应用 从json数组中得到相应java数组,如果要获取java数组中的元素,只需要遍历该数组. /* * 从json数组中得到相应java数组 * JSONArray下的toA ...

  2. 论文笔记《ImageNet Classification with Deep Convolutional Neural Network》

    一.摘要 了解CNN必读的一篇论文,有些东西还是可以了解的. 二.结构 1. Relu的好处: 1.在训练时间上,比tanh和sigmod快,而且BP的时候求导也很容易 2.因为是非饱和函数,所以基本 ...

  3. java网络编程（三）：一个类似QQ的聊天程序

    客户端: package QQ; import javax.swing.*; import java.awt.*; import java.awt.event.ActionEvent; import ...

  4. 反射的基本使用以及原理(Class获取方式)

    1.什么是反射技术? 动态获取指定类以及类中的内容(成员),并运行其内容. 应用程序已经运行,无法在其中进行new对象的建立,就无法使用对象.这时可以根据配置文件的类全名去找对应的字节码文件,并加载进 ...

  5. Codevs 1643 & 3027 线段覆盖

    1643 题意 给定若干条线段,问最多可以安排多少条使得没有重合. 思路 贪心,同安排schedule,按结束时间早的排序. Code #include <bits/stdc++.h> # ...

  6. VS Code开发技巧集锦【转】

    转自:http://blog.csdn.net/tiantangyouzui/article/details/52163175 入门 自定义 扩展 文件/文件夹管理 编辑技巧 智能感应功能 代码片段 ...

  7. hdu 4738 无向图缩点断桥 // 细节坑题

    Caocao's Bridges 题意:给个无向图,求出边权最小的桥. 一看,直接缩点,若无桥,输出-1,有桥,遍历下边,更新最小..分分钟搞定,以为IA的..一交wa... 坑点:1:若原图不连通, ...

  8. AutoResetEvent 和 ManualResetEvent 多线程应用

    AutoResetEvent 1.用于在多线程,对线程进行阻塞放行 static AutoResetEvent auth0 = new AutoResetEvent(false); static Au ...

  9. 爬虫学习笔记（三）requests模块使用

    前面在说爬虫原理的时候说了,就写代码自动化的获取数据,保存下来数据,那怎么写代码来请求一个网址,获取结果呢,就得用requests模块了. 这篇博客说一下requests模块的使用,requests模 ...

  10. (4)ASP.NET内置对象1

    一.Response 把数据从服务端发送到客户端 Response.Write() 在页面上输出数据 Response.WriteFile(@"F:\WriteFile.txt") ...