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. openssl RSA 内存读取密钥

    主要注意一下密钥的格式 #include <openssl/pem.h> #include <openssl/err.h> bool CEncipher::CreatePubK ...

  2. 两个Vue Demo

    1 实现 person list <!DOCTYPE html> <html> <head> <meta charset="UTF-8"& ...

  3. js 一/二维数组排序

    JavaScript中数组排序方法 用到的最多的当然是封装好的sort()方法了 一:sort()方法怎么使用? sort方法并不像我们想的那么容易使用,不是单纯的arr.sort()就行了,需要我们 ...

  4. js数据类型判断

    在一般情况下使用typeof 但是有时候typeof返回的结果都是object,比如数组和json对象的时候,这个时候需要用到 instanceof了 还有一个更好得办法,Object.prototy ...

  5. hdu 5930 GCD 线段树上二分/ 强行合并维护信息

    from NOIP2016模拟题28 题目大意 n个点的序列,权值\(<=10^6\) q个操作 1.单点修改 2.求所有区间gcd中,不同数个数 分析 1.以一个点为端点,向左或向右的gcd种 ...

  6. ANT总结

    1 Ant是什么? Apache Ant 是一个基于 Java的生成工具.生成工具在软件开发中用来将源代码和其他输入文件转换为可执行文件的形式(也有可能转换为可安装的产品映像形式).随着应用程序的生成 ...

  7. 收藏一下这个微软MVP的老外博客

    原文发布时间为:2011-04-20 -- 来源于本人的百度文章 [由搬家工具导入] http://blog.overridethis.com/blog  http://haacked.com htt ...

  8. SQL触发器的使用及语法

    原文发布时间为:2010-08-07 -- 来源于本人的百度文章 [由搬家工具导入] ===以下转qsfwy.javaeye.com/blog/424789定义： 何为触发器？在SQL Server里 ...

  9. Bazinga 题解

    第十四届浙江财经大学程序设计竞赛重现赛-B题 https://www.nowcoder.com/acm/contest/89/B 可能最近,脑子有问题,看见数论题都是秒,学弟问我这题怎么做,结果我沉思 ...

  10. paramiko模块及ssh远程登陆

    ssh实现远程登陆一般有两种方式,一种就是用户密码登陆,另一种是密钥登陆(当然默认是要服务端打开ssh服务). 我这里使用这两种方法操作一下远程登陆,测试客户端是本机的root与jeff用户,远程连接 ...