Vue学习之路第十三篇：v-for指令
v-for指令，看名字想必大家也能猜到其作用，没错，就是用来迭代、遍历的。
1、简单数组的遍历
<body>
<divi id="app">
<span v-for="item in list">{{item}} </span>
</div> <script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
list:['one','two','three','four','five']
},
methods:{}
})
</script>
</body>
data里定义了list字符串数组，在页面中使用v-for指令对list进行遍历，"item"是当前正在遍历的元素对象，“in”是固定语法，“list”是被遍历的数组。用插值表达式来展示当前遍历的对象。
有时除了遍历数据外，我们还需要当前遍历的序号：
<divi id="app">
<span v-for="(item,i) in list">序号为：{{i}}，元素为：{{item}}<br></span>
</div>
（Item,i）其中i为序号，当然i和item是临时变量可以任意定义。运行结果：
2、对象数组的遍历
<body>
<divi id="app">
<span v-for="(item,i) in list">序号：{{i}}，科目为：{{item.course}}，分数为：{{item.score}}<br></span>
</div> <script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
list:[
{'course':'语文', 'score':89},
{'course':'数学', 'score':80},
{'course':'英语', 'score':90}
]
},
methods:{}
})
</script>
</body>
通过"item.score"的方法，来获取对象的属性值。运行结果如下：
3、遍历对象
<body>
<divi id="app">
<span v-for="(value,key) in mark">属性名：{{key}}，属性值：{{value}}<br></span>
</div> <script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
mark:{
'语文':90,
'数学':95,
'英语':89
}
},
methods:{}
})
</script>
</body>
这里定义了一个mark对象，该对象有三个属性，遍历对象的时候固定写法为：(XX,YY)，其中YY为对象的key，XX为对象的值。
当然也可以写成：(XX,YY,i)，其中i为索引值。
4、遍历数字
<divi id="app">
<span v-for="count in 5">当前数字为：{{count}}<br></span>
</div>
这里in后面直接写的是具体的数字。运行结果：
总结：v-for进行遍历的时候，其可以遍历数组、对象数组、对象、数字。
每天进步一点点！
Vue学习之路第十三篇：v-for指令的更多相关文章
- Vue学习之路第四篇：v-html指令
上一篇我们讲解了两种方式,把Vue对象的数据展示在页面上: 1.插值表达式 2.v-text指令 但是如果我们展示的数据包含元素标签或者样式,我们想展示标签或样式所定义的属性作用,该怎么进行渲染,比如 ...
- Vue学习之路第三篇：插值表达式和v-text的区别
上一篇说到插值表达式有一个问题: 页面频繁刷新或者网速加载很慢的时候,页面会先出现“{{ msg }}”,再一闪而过出现真实的数据. 对于这个问题Vue给予了解决办法,看具体事例. <div i ...
- vue学习指南：第十三篇(详细) - Vue的 路由 第三篇 ( 路由的缓存 )
路由的缓存 路由缓存是 Vue组件优化的一个重要方法 为什么实现路由缓存? 为了 组件间 相互切换不会重复加载数据,影响用户体验,我们通常需要将组件的数组实现缓存,当我们点过来,在点的时候会再次发送 ...
- Vue学习之路第二十篇：Vue生命周期函数-组件创建期间的4个钩子函数
1.每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听.编译模板.将实例挂载到 DOM 并在数据变化时更新 DOM 等.同时在这个过程中也会运行一些叫做生命周期钩子的函数 ...
- Vue学习之路第十一篇：为页面元素设置class类样式
1.class为页面元素的一个属性,通过前面第五篇的内容可知,操作属性需要使用到v-bind指定(也可简写为 :). 2.先来看一个简单的页面样式内容: <!DOCTYPE html> & ...
- Vue学习之路第十篇：简单计算器的实现
前面九篇讲解了vue的一些基础知识,正所谓:学以致用,今天我们将用前九篇的基础知识,来模拟实现计算器的简单功能,项目价值不高,纯粹是为了加深掌握所学知识. 学前准备: 需要掌握JavaScript的e ...
- Vue学习之路第八篇：事件修饰符
学习准备: ①.顾名思义,“事件修饰符”那么肯定是用来修饰事件,既然和事件有关系,那么肯定和“v-on”指令(也可简写为:@)有关系了. ②.事件修饰符有以下几类: .stop:阻止冒泡 .preve ...
- Vue学习之路第七篇：跑马灯项目实现
前面六篇讲解了Vue的一些基础知识,正所谓:学以致用,今天我们将用前六篇的基础知识,来实现类似跑马灯的项目. 学前准备: 需要掌握定时器的两个函数:setInterval和clearInterval以 ...
- Vue学习之路第五篇：v-bind
v-bind:是Vue提供的用于绑定html属性的指令. html中常见的属性有:id.class.src.title.style等,他们都是以 名称/值对 的形式出现,如:id="firs ...
随机推荐
- 洛谷 P1197 BZOJ 1015 [JSOI2008]星球大战 (ZOJ 3261 Connections in Galaxy War)
这两道题长得差不多,都有分裂集合的操作,都是先将所有操作离线,然后从最后一步开始倒着模拟,这样一来,分裂就变成合并,也就是从打击以后最终的零散状态,一步步合并,回到最开始所有星球都被连为一个整体的状态 ...
- 框架统一出参数DTO格式
这个可以没必要定义. 每个接口返回自己的数据格式就好
- JAVA版本号微信公众账号开源项目版本号公布-jeewx1.0（捷微）
JeeWx, 敏捷微信开发,简称"捷微". 捷微是一款免费开源的微信公众账号开发平台. 平台介绍: 一.简单介绍 jeewx是一个开源,高效.敏捷的微信开发平台採用JAVA语言,它 ...
- Meteor 前端 RESTful API 通过后端 API 下载文件
Meteor 下载文件 问题场景 后端 HTTP server提供一个下载接口,可是须要前端 Meteor 可以给浏览器用户开一个URL来下载这个文件. 举例:在线的Meteor Logo文件就好比后 ...
- linux中O(1)调度算法与全然公平(CFS)调度算法
一.O(1)调度算法 1.1:优先级数组 O(1)算法的:一个核心数据结构即为prio_array结构体. 该结构体中有一个用来表示进程动态优先级的数组queue,它包括了每一种优先级进程所形成的链表 ...
- UVA - 11077 Find the Permutations (置换)
Sorting is one of the most usedoperations in real life, where Computer Science comes into act. It is ...
- Xamarin Mono For Android、Monotouch 安装
一.Windows下面的安装 1. 安装环境介绍: Win8.1 企业版64位或Win7 64.VS2013 update4 2. 安装jdk 到oracle官方下载jdk-8u45-wi ...
- ios开发之Swift新手入门
1.关于swift和调试,swift在ios7.0才支持,ios8.3系统的真机必需要xcode6.3才干调试.安装xcode6.3需要os x 10.10以上 2.应用程序由Main.storybo ...
- Adding a model
https://docs.asp.net/en/latest/tutorials/first-mvc-app/adding-model.html Adding data model classes I ...
- 使用C语言扩展Python3
使用C语言扩展Python3.在Python3中正确调用C函数. 1. 文件demo.c #include <Python.h> // c function static PyObject ...