遍历数组和对象

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

<!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. billboard Shader待研究下

    Shader "Tut/Project/Billboard_1" { Properties { _MainTex ("Base (RGB)", 2D) = &q ...

  2. WCF服务寄宿IIS与Windows服务

      WCF是Windows平台下程序间通讯的应用程序框架.整合和 .net Remoting,WebService,Socket的机制,是用来开发windows平台上分布式开发的最佳选择.wcf程序的 ...

  3. vfptr(1)

    前言 C++中的虚函数的作用主要是实现了多态的机制.关于多态,简而言之就是用父类型别的指针指向其子类的实例,然后通过父类的指针调用实际子类的成员函数.这种技术可以让父类的指针有“多种形态”,这是一种泛 ...

  4. android实现卸载提示

    这篇文章是整理的以前用过的一个功能,由于多种原因现在停用了,也希望这篇文章能帮助一些android入门的小童鞋.android是不提供监控卸载自己的功能的,这里使用了监控android日志的功能,an ...

  5. 服务器http请求https服务时报错解决方案

    问题一. 问题二. java.security.KeyException 解决: Java.security.KeyException的解决 程序调用环信的接口时,出现此异常. 环境:centos , ...

  6. 2014-08-28——PC端几款主流浏览器的内核

    Trident(IE浏览器) Mozilla(Gecko)(熟悉的有Firefox,Flock等浏览器) WebKit(熟悉的有Safari.Chrome等浏览器) Opera(presto)(Ope ...

  7. Django的admin定制

    1,models编写 #encoding=utf-8 from django.db import models # Create your models here. class BookInfo(mo ...

  8. Android程序运行时权限与文件系统权限的区别

    apk程序是运行在虚拟机上的,对应的是Android独特的权限机制,只有体现到文件系统上时才使用linux的权限设置. (1)Android中的apk必须签名 (2)基于UserID的进程级别的安全机 ...

  9. 转载：阮一峰 理解RESTful架构

    转载 http://www.ruanyifeng.com/blog/2011/09/restful.html 越来越多的人开始意识到,网站即软件,而且是一种新型的软件. 这种"互联网软件&q ...

  10. 003-centos搭建idea开发java

    一.jdk安装 卸载openjdk 安装jdk 配置环境变量 二.下载idea 安装:http://www.cnblogs.com/bjlhx/p/6667291.html 三.配置git http: ...