遍历数组和对象

和条件选择一样，循环也和其他语言类似，也尝试着用一个例子解决问题

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title></title>

    <script src="https://unpkg.com/vue"></script>

</head>

<body>

    <div id="app-1">

        <div v-for="(site, index) in sites">

            {{ index + 1 }}.{{ site.name }}

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

                {{ key }}: {{ value }}

            </li>

        </div>

    </div>

    <script type="text/javascript">

        var vm1 = new Vue({

            el: '#app-1',

            data: {

                sites: [

                    { url: 'http://www.tansea.cn', name: '双子宫殿', prValue: 0 },

                    { url: 'https://www.google.com', name: '谷歌', prValue: 10 },

                    { url: 'https://www.baidu.com', name: '百度', prValue: 9 }

                ]

            }

        })

    </script>

</body>

</html>

外循环的sites是一个数组，遍历数组的语法格式：(item, index) in items，item指迭代元素，index指索引，items指原始数据数组

内循环的site是一个对象，遍历对象的语法格式：(value, key, index) in object，value指属性值，key指属性名称，index指索引，object指对象

当然参数也是可以缺省的，在只有一个参数的时候可以不用刮号

<div id="app-1">

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

        {{ site.name }}

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

            {{ key }}: {{ value }}

        </li>

    </div>

</div>

在整数范围内迭代

<div id="app-2">

    <span v-for="n in 10">{{ n }}</span>

    <span v-for="n in [1,3,5,7,9]">{{ n }}</span>

</div>

<script type="text/javascript">

    var vm2 = new Vue({

        el: '#app-2'

    })

</script>

n in 10是1到10整数范围内迭代

n in [1,3,5,7,9]是数组内元素迭代，这里的数组包括5个元素

Vue.js学习笔记 第四篇 列表渲染的更多相关文章

  1. Vue.js学习笔记 第三篇 条件渲染

    条件选择 条件选择的用法和其他语言类似,一个例子就能解决所有问题 <!DOCTYPE html> <html> <head> <meta charset=&q ...

  2. Vue.js学习笔记 第八篇 组件

    全局注册组件 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <ti ...

  3. Vue.js学习笔记 第七篇 表单控件绑定

    本篇主要说明表单控件的数据绑定,这次没有新的知识点 文本框 1.普通文本框 <div id="app-1"> <p><input v-model=&q ...

  4. Vue.js学习笔记 第六篇 内置属性

    computed属性 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> &l ...

  5. Vue.js学习笔记 第五篇 事件处理

    监听事件 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <titl ...

  6. vue.js 学习笔记3——TypeScript

    目录 vue.js 学习笔记3--TypeScript 工具 基础类型 数组 元组 枚举 字面量 接口 类类型 类类型要素 函数 函数参数 this对象和类型 重载 迭代器 Symbol.iterat ...

  7. Vue.js学习笔记（2）vue-router

    vue中vue-router的使用:

  8. Vue.js学习笔记：在元素 和 template 中使用 v-if 指令

    f 指令 语法比较简单,直接上代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " ...

  9. Vue.js学习笔记 第一篇 数据绑定

    双花括号文本插值 先来个最简单的例子,看完之后立马会用Vue了,是不是很有成就感 <!DOCTYPE html> <html> <head> <meta ch ...

随机推荐

  1. OpenCV学习笔记五：opencv_legacy模块

    opencv_legacy,顾名思义,该模块是用于兼容以前的opencv代码而设立的. 如果你希望用最新的opencv代码和特性,请勿使用该模块.

  2. MySQL的下载及安装

    前言:不仅要知其然,还要知所以然 MySQL数据库作为关系型数据库中的佼佼者,因其体积小,速度快,成本低,不仅受到了市场的极大追捧,也受到了广大程序员的青睐.接下来,就给大家说一下,MySQL的下载和 ...

  3. Android获取网络类型

    public static final String NETWORK_CLASS_UNKNOWN = "unknown"; public static final String N ...

  4. django 1.10以上版本，引入js

    引入js库 建立static文件夹:  注意上图里面static文件夹的路径,再在里面添加js文件夹,js文件夹里面就可以放我们需要的js文件了. 配置相关文件 接下来,想要使用这些js我们还需要进行 ...

  5. 谈谈Android重打包--初语

    写在前面的话 仅以此系列献给喜欢我CSDN的小伙伴们 申明 此文禁止转载,谢谢合作 序言 在开头说这会是一个系列,那就说明我有非常多话要说.从最简单的介绍到问题的提出.解决方式的构思以及整个系统的架构 ...

  6. 【BZOJ2730】[HNOI2012]矿场搭建 Tarjan

    [BZOJ2730][HNOI2012]矿场搭建 Description 煤矿工地可以看成是由隧道连接挖煤点组成的无向图.为安全起见,希望在工地发生事故时所有挖煤点的工人都能有一条出路逃到救援出口处. ...

  7. IDEA : Git Pull Failed 解决（IDEA中使用stash功能）

    一.问题: 本地要commit代码,commit之前需pull代码,但pull提示冲突.如下 Git Pull Failed Your local changes would be overwritt ...

  8. 华盟网公开课 office 宏 主讲Alex

    powershell github: veil-evasion macroshop   unicorn https://github.com/trustedsec/unicorn metasploit ...

  9. 用JS改变的元素CSS样式，css里display :none 隐藏 block 显示

    CSS样式的引用有3种方式:style引用.class引用.id引用,所以js改变元素的样式我们也分3种来说. 1.js改变由style方式引用的样式:方法一:document.divs.style. ...

  10. mysql-font的理解

    mysql-front是为mysql制作的一种图形化界面工具,可以管理和操作数据库,比如建表,修改数据,拖拽方式的数据库和表格,可编辑/可增加/删除的域,可编辑/可插入/删除的记录,可显示的成员,可执 ...