遍历数组和对象

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

<!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. python3 - property的使用

    传统的绑定属性值,会把属性暴露出去,而且无法检查参数是否合法,如下: class Test(object): def  __int__(self,age): self.age = age 为了检查参数 ...

  2. W​i​n​下​h​t​t​p​d​+​p​h​p​+​m​y​s​q​l​环​境​集​成

    apache+php+mysql: php下载:  VC6就是legacy Visual Studio 6 compiler,就是使用这个编译器编译的,  VC9就是the Visual Studio ...

  3. ASP.NET MVC 使用dataTable（3）--更多选项参考

    ASP.NET MVC 使用dataTable(3)--更多选项参考 jQuery  dataTables 插件是一个优秀的表格插件,是后台工程师的福音!它提供了针对数据表格的排序.浏览器分页.服务器 ...

  4. Oracle Delete与系统资源

    在用Delete删除数据时,SQL语句首先要通过全表扫描或索引扫描找到符合条件的记录并删除. 然而在这个过程中将消耗大量的CPU资源,I/O资源以及UNDO数据. 如果删除的数据量较大,将极大的影响系 ...

  5. 对 pthread 做的一个简陋封装

    参考自 pthreadcc 库的 ThreadBase 类 用法:继承该类,重写 execute 方法,调用父类的 launchThread 方法启动线程 Thread.h // // Thread. ...

  6. CAFFE学习笔记（五）用caffe跑自己的jpg数据

    1 收集自己的数据 1-1 我的训练集与测试集的来源:表情包 由于网上一幅一幅图片下载非常麻烦,所以我干脆下载了两个eif表情包.同一个表情包里的图像都有很强的相似性,因此可以当成一类图像来使用.下载 ...

  7. iOS反射：把对象直接转化成NSDictionary

    在IOS的网络编程中,通常我们需要将一些实体数据保存到NSDictionary,在获得NSDictionary后即可直接使用iOS 5后的NSJSONSerialization类型的dataWithJ ...

  8. PAT 1069. 微博转发抽奖(20)

    小明PAT考了满分,高兴之余决定发起微博转发抽奖活动,从转发的网友中按顺序每隔N个人就发出一个红包.请你编写程序帮助他确定中奖名单. 输入格式: 输入第一行给出三个正整数M(<= 1000).N ...

  9. 关于like %%的优化思路

    测试数据:2亿行,被筛选出的数据,3KW多行. 众所周知 like %str%无法走索引,但是我们如果实在是有这种需求要达到like '%str%'的筛选目的,怎么优化好一些呢? 以下是我的一些思考: ...

  10. SQLtie 增删该查

    建表,添加数据,更新数据,删除数据,删除表 . 先介绍三个核心方法 1.openDatabase:这个方法使用现有数据库或创建新数据库创建数据库对象. 2.transaction:这个方法允许我们根据 ...