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. react 当中重新渲染dom的方法

    有个upload 重复上传同名文件的需求,在网上找了很多解决方案都不好使,在react当中解决该问题其实很简单,其实无法上传同名文件 的原因是因为无法触发onChange事件,只需要刷新改dom就可以 ...

  2. 【HDOJ5538】House Building（计算几何）

    题意:给定一个n*m的方阵,第i行第j列的高度为a[i][j],问除了下底面之外其余五面的总表面积 n<=50,0<=a[i][j]<=1000 思路:队友写的,抱大腿 考虑当前方格 ...

  3. IOS-内存检测以及优化

    IOS-内存检测以及优化 2014年01月23日 Jason PS:开始写这个系列的笔记:主要是对过去自己比较模糊的一些概念进行测试,明确结果,提高自己 IOS 应用如果占用系统的内容过大(8GB), ...

  4. [LeetCode] Insert Interval 二分搜索

    Given a set of non-overlapping intervals, insert a new interval into the intervals (merge if necessa ...

  5. 【shell】Shell命令合集(0)

    Ccat zdd 浏览文件zdd的内容cat zdd1 zdd2 浏览多个文件的内容cat -n zdd浏览文件zdd的内容并显示行号 cd 回到起始目录,也即刚登陆到系统的目录,cd后面无参数cd ...

  6. 知乎上的一些文章---leetcode【笔记1】

    张土汪 http://github.com/shawnfan Java{script}代码仔 42 人赞同 [1.19.2017] 更新: 2017年1月17日, 陪我征战多年的 2014 MackB ...

  7. 解决mysql 远程链接问题

    grant all privileges on *.* to 'root'@'192.168.2.204' identified by '123456' with grant option;flush ...

  8. HDU 6227.Rabbits-规律 (2017ACM/ICPC亚洲区沈阳站-重现赛（感谢东北大学）)

    Rabbits Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 262144/262144 K (Java/Others)Total S ...

  9. 洛谷 P1865 A % B Problem[筛素数/前缀和思想/区间质数个数]

    题目描述 区间质数个数 输入输出格式 输入格式: 一行两个整数 询问次数n,范围m 接下来n行,每行两个整数 l,r 表示区间 输出格式: 对于每次询问输出个数 t,如l或r∉[1,m]输出 Cros ...

  10. Linux笔记：vim

    文件搜索后显示高亮,即使退出编辑高亮依然存在.使用以下几个方法: 1)指令模式下运行:nohlsearch 2)运行set nohlsearc,可永久关闭搜索高亮 3)搜索任意不存在的字符串