遍历数组和对象

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

<!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. freemark 页面静态化

    1. 页面静态化是什么? 页面静态化有非常多含义,在WEB开发中.静态网页一般理解为站点中大部分超级链接所引用的页面是单独的HTML静态页面文件(如.htm..html等页面文件,html语言本身是静 ...

  2. Servlet线程安全2

    Servlet的多线程机制 Servlet体系结构是建立在Java多线程机制之上的,它的生命周期是由Web容器负责的.当客户端第一次请求某个Servlet时,Servlet容器将会根据web.xml配 ...

  3. Java Random 含参与不含参构造函数的区别

    ##Random 通常用来作为随机数生成器,它有两个构造方法: Random random = new Random(); Random random2 = new Random(50); 1.不含参 ...

  4. CodeIgniter框架——数据库类(配置+快速入门)

    CodeIgniter用户指南——数据库类 数据库配置 入门:用法举例 连接数据库 查询 生成查询结果 查询辅助函数 Active Record 类 事务 表格元数据 字段元数据 自定义函数调用 查询 ...

  5. hdu5646(数学)

    小学数学,脑补 一开始看到这题,猜了个规律想写但是我是拒绝的. 因为我无法证明. 好吧,主要还是小学数学没学好吧. 要理解这题,首先得搞懂一个重要问题.假设C=A+B,怎样选择两个正整数使得A*B最大 ...

  6. hdu 5452(树链刨分)

    看到题目,想了挺长时间,发现不会,然后看着样子像是树上成段操作,所以查了下树链刨分,结果真的就是这个东西... Minimum Cut Time Limit: 3000/2000 MS (Java/O ...

  7. Java类的加载、链接和初始化（个人笔记）

    这里看到一篇比较好的文章:http://www.infoq.com/cn/articles/cf-Java-class-loader 这里只是针对什么时候会触发java类的初始化(注意:这里不是说的实 ...

  8. 【BZOJ3158】千钧一发 最小割

    [BZOJ3158]千钧一发 Description Input 第一行一个正整数N. 第二行共包括N个正整数,第 个正整数表示Ai. 第三行共包括N个正整数,第 个正整数表示Bi. Output 共 ...

  9. Oracle 逻辑体系

    Oracle 逻辑体系 主题 Oracle 逻辑体系 参考资料   Oracle 逻辑体系   表空间.模式.用户.段.区.块 Oracle中的数据逻辑上存储于表空间,物理上则存储于属于表空间tabl ...

  10. php7/etc/php-fpm.d 配置

    php7/etc/php-fpm.d/www.conf nginx php-fpm 高并发优化 - 日记本的回忆 - 博客园 https://www.cnblogs.com/cocoliu/p/856 ...