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 ...
随机推荐
- fzu 2087并查集的运用求最小生成树的等效边
//对数组排序后,对于边相同并且边的两端不在一个集合内的一定是等效边或者必加边, //第一数数,第二合并集合 #include<stdio.h> #include<stdlib.h& ...
- POJ 3628 Bookshelf 2 题解
本题解法非常多,由于给出的数据特殊性故此能够使用DFS和BFS,也能够使用01背包DP思想来解. 由于一般大家都使用DFS,这里使用非常少人使用的BFS.缺点是比DFS更加耗内存,只是长处是速度比DF ...
- 黑马day07 登录注冊案例(一)
简单介绍:依据三层架构的思想设计本案例. 1.搭建好开发环境 准备好须要的包和模拟数据库配置文件users.xml -->cn.itheima.dao -->cn.itheima.serv ...
- selenium实例学习地址
一个完整的maven配置selenium webdriver工程实例 http://www.spasvo.com/ceshi/open/kygncsgj/Selenium/201312209580 ...
- Linux命令（十）——Shell程序设计一（变量与操作符）
Shell是linux系统中用户和系统交互的接口,它除了作为命令解释器以外,还是一种高级程序设计语言.在前面介绍的linux命令中,Shell都作为命令解释器出现.下面分两节简单介绍脚本程序设计中的语 ...
- DecimalFormat格式化输出带小数的数字类型
刚開始 double d = 333333333.333333333; System.out.println(d); 输出结果为3.333333333333333E8 网上找到了DecimalForm ...
- Ubuntu Tomcat Service
只需要将%TOMCAT_HOME%/bin/catalina.sh文件拷贝到/etc/init.d/文件夹下,稍作编辑,然后注册成系统服务,是否设置自启动均可. 1. 编辑catalina.sh文件c ...
- 字符串函数---strcmp()与strncmp()详解及实现【转】
本文转载自:http://blog.csdn.net/lanzhihui_10086/article/details/39829623 一.strcmp()与strncmp() strcmp():st ...
- PHP中数据类型转换的三种方式
PHP中数据类型转换的三种方式 PHP的数据类型转换属于强制转换,允许转换的PHP数据类型有: 1.(int).(integer):转换成整形2.(float).(double).(real):转换成 ...
- 【概率证明】—— sum and product rules of probability
1. sum and product rules of probability ⎧⎩⎨p(x)=∫p(x,y)dyp(x,y)=p(x|y)p(y) sum rule of probability 的 ...